微信小程序步骤条_x小程序 步骤条

微信小程序步骤条

微信小程序原生开发中，会有绘制步骤条的需求，具体怎么实现呢？
下面是我自己制作的两种步骤条，封装成自定义组件，可根据需要引入（记得在json文件中引入）：

//json文件（自己修改路径）
{
   
  "usingComponents": {
   
    "processBar": "../../../components/processBar/processBar",
    "createProcess": "../../../components/createProcess/createProcess"
  }
}
1
2
3
4
5
6
7
8
9

1.步骤条一
引入组件：

<createProcess processList="{
    {showProcessList}}" iconIndex="{
    {showIndex}}" ></createProcess>
1
2
3

组件内容：

//html
<view class="entry-top">
  <view class="order_process">
    <view class="process_wrap " wx:for="{
    {processList}}" wx:key="index">
      <view class="process" data-index="{
    {index}}">
        <view class="process_line {
    {index==0?'bg-transparent':''}} {
    {index<iconIndex?'opacity10':'opacity5'}}"></view>
        <view
          class="process_icon {
    { index<iconIndex?'icon-active active-bg opacity10':'icon-noactive active-bg opacity5'}}">
          {
  {index+1}}</view>
        <view
          class="process_line {
    {index==processList.length-1?'bg-transparent':''}} {
    {index<iconIndex-1?'opacity10':'opacity5'}}">
        </view>
      </view>
      <text class="process_name' {
    { index<iconIndex?'name-active':''}}">{
  {item}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23