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

1.实现效果

微信图片_20220725222751.jpg

2.实现原理

方法一:

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

方法二:

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

eg:

 
image.png

3.实现代码

//方法一:

  
    
      
        
        {{item.pro_name}}
        
      
    
  


//方法二:

  
    
    
      
        
        {{item.pro_name}}
      
    
  

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+订阅!

你可能感兴趣的:(微信小程序实现动态横向步骤条的两种方式)