微信小程序实现动态横向步骤条的两种方式

1.实现效果

2.实现原理

方法一：

页面总宽：750rpx ，去除相应间距等，留有长度600rpx左右。当列表的索引为0时，不显示步骤条横线， 即每个步骤条的宽度为600/(总步骤数-1）rpx。
flex横向布局，均匀排列每个元素，每个元素宽度为100rpx，当数据过多时，向内挤压该元素。

方法二：

progress:进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
将progress定位在图片中间，通过计算相应比例，设置激活百分比。
设置总宽度为600rpx。每份的长度为100/（总步骤数-1），百分比为每份的长度*（激活的总步数-1）

eg：

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

3.实现代码

//方法一：
<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>

//方法二：
<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: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
        ],
        sel_icon: "../img/circle02.png",
        pro_color: '#3DB969'
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },

        ],
        sel_icon: "../img/circle02.png",
        pro_color: '#3DB969',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },
          {
    
            status: 0,
            pro_name: '退款失败'
          },
        ],
        sel_icon: "../img/circle02.png",
        pro_color: '#3DB969',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },
          {
    
            status: 1,
            pro_name: '退款失败'
          },
          {
    
            status: 0,
            pro_name: '请重新提交申诉'
          },
        ],
        sel_icon: "/img/cart_select.png",
        pro_color: '#DE59A3',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },
          {
    
            status: 1,
            pro_name: '退款失败'
          },
          {
    
            status: 1,
            pro_name: '请重新提交申诉'
          },
          {
    
            status: 0,
            pro_name: '申诉中'
          },
        ],
        sel_icon: "/img/cart_select.png",
        pro_color: '#DE59A3',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },
          {
    
            status: 1,
            pro_name: '退款失败'
          },
          {
    
            status: 1,
            pro_name: '请重新提交申诉'
          },
          {
    
            status: 1,
            pro_name: '申诉中'
          },
          {
    
            status: 0,
            pro_name: '申诉失败'
          },
        ],
        sel_icon: "/img/cart_select.png",
        pro_color: '#DE59A3',
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },
          {
    
            status: 1,
            pro_name: '退款失败'
          },
          {
    
            status: 1,
            pro_name: '请重新提交申诉'
          },
          {
    
            status: 1,
            pro_name: '申诉中'
          },
          {
    
            status: 1,
            pro_name: '申诉失败'
          },
          {
    
            status: 0,
            pro_name: '申请客服介入'
          },
        ],
        sel_icon: "/img/wuliu_icon2.png",
        pro_color: '#682074'
      },
      {
    
        stepInfo: [{
    
            status: 1,
            pro_name: '提交申请'
          },
          {
    
            status: 1,
            pro_name: '审核不通过呢'
          },
          {
    
            status: 1,
            pro_name: '卖家不同意,无须退回'
          },
          {
    
            status: 1,
            pro_name: '退款失败'
          },
          {
    
            status: 1,
            pro_name: '请重新提交申诉'
          },
          {
    
            status: 1,
            pro_name: '申诉中'
          },
          {
    
            status: 1,
            pro_name: '申诉失败'
          },
          {
    
            status: 1,
            pro_name: '申请客服介入'
          },
          {
    
            status: 1,
            pro_name: '退款成功'
          },
        ],
        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.更多小程序相关，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！