How to implement step bar component in uniapp

How to implement the step bar component in uniapp

The step bar is a common interface element used to display the progress and status of the current operation. In uniapp, we can implement a step bar component by customizing the component. This article will introduce in detail how to implement the step bar component, and attach sample code for reference.

Design of step bar component

Before we start writing code, we need to design the style and structure of the step bar component. A basic step bar component usually contains the following parts:

1. Step line: used to connect each step and represent the sequence of the operation process.
2. Step node: icon or text representing each step.
3. Current step highlighting effect: Used to identify which step is currently in progress.
4. Auxiliary information: such as the title and description of the step, etc.

Based on the above design, we can create a custom component named StepBar to implement the step bar component.

Code implementation

First, create a new component file StepBar.vue in the uniapp project, and copy the following code to the file:

<template>
  <view class="step-bar">
    <view class="step-line" :style="{width: line}" ></view>
    <view v-for="(step, index) in steps" :key="index" class="step-node" :class="{'active': index === current}">
      <image v-if="!step.text" :src="step.icon" class="step-icon" />
      <text v-else class="step-text">{{step.text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    steps: {
      type: Array,
      default: () => []
    },
    current: {
      type: Number,
      default: 0
    }
  },
  computed: {
    line() {
      // 计算步骤线的宽度
      return (100 / (this.steps.length - 1) * this.current) + '%';
    }
  }
}
</script>

<style>
.step-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-line {
  height: 2px;
  background-color: #ebeef5;
}

.step-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ebeef5;
}

.step-node.active {
  background-color: #409eff;
}

.step-icon {
  width: 30px;
  height: 30px;
}

.step-text {
  font-size: 12px;
  color: #333;
}
</style>

The above code implements the basic functions of the StepBar component. This component accepts two props parameters:

1. steps: an array containing each step, each step contains icon and textTwo fields.
2. current: The index of the current step.

StepBar component dynamically calculates the width of the step line through the calculated property line to achieve the highlight effect of the step bar. Among them, the v-for instruction is used to traverse the steps array and determine whether to activate the step based on the index of the current step.

How to use the step bar component

In the page where you need to use the step bar component, you first need to introduce the StepBar component and define it# in data ##stepsArray and currentvariable. Then, pass steps and current as props of the StepBar component to the component to render the step bar on the page.

The following is a sample code using the step bar component:

<template>
  <view>
    <step-bar :steps="steps" :current="current" />
  </view>
</template>

<script>
import stepBar from '@/components/StepBar.vue';

export default {
  components: {
    stepBar
  },
  data() {
    return {
      steps: [
        { icon: '~/static/icon1.png' },
        { text: '步骤2' },
        { text: '步骤3' },
        { text: '步骤4' },
      ],
      current: 2
    }
  }
}
</script>

In the above example, we created a

StepBar component and defined a 4-step The steps array. Specify that the current step is 3 by assigning a value to current. The step bar on the page will appear as:

Step 1 - Step 2 - Step 3 - Step 4

Summary

Through the introduction of this article, we have learned how to use uniapp Implement a step bar component in . By customizing components, we can flexibly customize the style and functionality of the step bar. By passing parameters in the page, the status and progress of different steps can be displayed according to different needs. I hope this article will be helpful to your development work.

The above is the detailed content of How to implement step bar component in uniapp. For more information, please follow other related articles on the PHP Chinese website!