Two ways for wechat applet to realize dynamic horizontal step bar

1. Realization effect

2. Realization principle

Method 1 ：

Total page width ：750rpx , Remove the corresponding spacing, etc , Leave a length 600rpx about . When the index of the list is 0 when , Do not display step horizontal lines , That is, the width of each step bar is 600/( Total steps -1）rpx.
flex The horizontal layout , Arrange each element evenly , The width of each element is 100rpx, When there is too much data , Squeeze the element inward .

Method 2 ：

progress: Progress bar . The default length unit for component properties is px,2.4.0 Support for incoming units (rpx/px).
take progress Locate in the middle of the picture , By calculating the corresponding proportion , Set the activation percentage .
Set the total width to 600rpx. The length of each serving is 100/（ Total steps -1）, The percentage is the length of each *（ Total number of active steps -1）

eg：

 <progress percent="20" show-info stroke-width="3"/>

3. Implementation code

// Method 1 ：
<view class="con" wx:for="{
    {list}}" wx:key="list" wx:for-item="itemP" wx:for-index="indexP">
  <view class="head">
    <block wx:for="{
    {itemP.stepInfo}}" wx:key='list' wx:for-item="item" wx:for-index="index">
      <view class="head_info">
        <image class="head_icon" src="{
    {item.status==1?itemP.sel_icon:'../img/circle03.png'}}"></image>
        <view class="head_title">{
    {
    item.pro_name}}</view>
        <view wx:if="{
    {index!=0}}" class='head_line' style="width:{
    {600/(itemP.stepInfo.length-1)}}rpx;background:{
    {item.status==1?itemP.pro_color:''}};"></view>
      </view>
    </block>
  </view>
</view>

// Method 2 ：
<view class="con" wx:for="{
    {list}}" wx:key="list" wx:for-item="itemP" wx:for-index="indexP">
  <view class="head">
    <progress percent="{
    {itemP.per}}" stroke-width="2" color="{
    {itemP.pro_color}}" />
    <block wx:for="{
    {itemP.stepInfo}}" wx:key='list' wx:for-item="item" wx:for-index="index">
      <view class="head_info">
        <image class="head_icon" src="{
    {item.status==1?itemP.sel_icon:'../img/circle03.png'}}"></image>
        <view class="head_title">{
    {
    item.pro_name}}</view>
      </view>
    </block>
  </view>
</view>

page {
    
  padding-bottom: 20px;
}

.con {
    
  padding: 24rpx 20rpx;
  margin: 20rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
}

.head {
    
  display: flex;
  justify-content: space-between;
  position: relative;
}

.head_info {
    
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100rpx;
  text-align: center;
}

.head_icon {
    
  width: 32rpx;
  height: 32rpx;
  z-index: 1;
}

.head_title {
    
  margin-top: 10rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  color: #333333;
}

.head_line {
    
  position: absolute;
  top: 16rpx;
  right: 35%;
  height: 2rpx;
  background: #ccc;
}


progress {
    
  width:600rpx;
  position: absolute;
  top: 13%;
  left: 5%;
}

Page({
    
  data: {
    
    list: [{
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
        ],
        sel_icon: "../img/circle02.png",
        pro_color: '#3DB969'
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },

        ],
        sel_icon: "../img/circle02.png",
        pro_color: '#3DB969',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },
          {
    
            status: 0,
            pro_name: ' Refund failed '
          },
        ],
        sel_icon: "../img/circle02.png",
        pro_color: '#3DB969',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },
          {
    
            status: 1,
            pro_name: ' Refund failed '
          },
          {
    
            status: 0,
            pro_name: ' Please resubmit your complaint '
          },
        ],
        sel_icon: "/img/cart_select.png",
        pro_color: '#DE59A3',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },
          {
    
            status: 1,
            pro_name: ' Refund failed '
          },
          {
    
            status: 1,
            pro_name: ' Please resubmit your complaint '
          },
          {
    
            status: 0,
            pro_name: ' In appeal '
          },
        ],
        sel_icon: "/img/cart_select.png",
        pro_color: '#DE59A3',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },
          {
    
            status: 1,
            pro_name: ' Refund failed '
          },
          {
    
            status: 1,
            pro_name: ' Please resubmit your complaint '
          },
          {
    
            status: 1,
            pro_name: ' In appeal '
          },
          {
    
            status: 0,
            pro_name: ' The appeal failed '
          },
        ],
        sel_icon: "/img/cart_select.png",
        pro_color: '#DE59A3',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },
          {
    
            status: 1,
            pro_name: ' Refund failed '
          },
          {
    
            status: 1,
            pro_name: ' Please resubmit your complaint '
          },
          {
    
            status: 1,
            pro_name: ' In appeal '
          },
          {
    
            status: 1,
            pro_name: ' The appeal failed '
          },
          {
    
            status: 0,
            pro_name: ' Apply for customer service intervention '
          },
        ],
        sel_icon: "/img/wuliu_icon2.png",
        pro_color: '#682074'
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: ' Application for submission '
          },
          {
    
            status: 1,
            pro_name: ' The audit failed '
          },
          {
    
            status: 1,
            pro_name: ' The seller disagrees , No need to return '
          },
          {
    
            status: 1,
            pro_name: ' Refund failed '
          },
          {
    
            status: 1,
            pro_name: ' Please resubmit your complaint '
          },
          {
    
            status: 1,
            pro_name: ' In appeal '
          },
          {
    
            status: 1,
            pro_name: ' The appeal failed '
          },
          {
    
            status: 1,
            pro_name: ' Apply for customer service intervention '
          },
          {
    
            status: 1,
            pro_name: ' Refund successful '
          },
        ],
        sel_icon: "/img/wuliu_icon2.png",
        pro_color: '#682074'
      }
    ],
  },
  onShow() {
    
    let {
    
      list
    } = this.data;
    list.forEach(item => {
    
      let onePer = item.stepInfo.filter(i0 => i0.status == 1).length;
      item.per =100/(item.stepInfo.length-1)*(onePer-1)
    })
    this.setData({
    
      list
    })
  }
})

4. More applet related , Official account Su Su bug, More applets demo, All in Su Su's code cloud If it helps you , Welcome to star+ subscribe ！