微信小程序实现流程进度功能

1. wxml 

   
      
        
          
          
          
        
        {{item.name}}
      
    

2. JS 

processData: [{
      name: '提交工单',
      start: '#fff',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '已接单',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '开始维修',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '维修结束',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '已确认',
      start: '#EFF3F6',
      end: '#fff',
      icon: '../../img/process_1.png'
    }],
  },

//进度条的状态
  setPeocessIcon: function () {
    var index = 0//记录状态为1的最后的位置
    var processArr = this.data.processData    // console.log("progress", this.data.detailData.progress)
    for (var i = 0; i < this.data.detailData.progress.length; i++) {
      var item = this.data.detailData.progress[i]
      processArr[i].name = item.word      if (item.state == 1) {
        index = i
        processArr[i].icon = "../../img/process_3.png"
        processArr[i].start = "#45B2FE"
        processArr[i].end = "#45B2FE"
      } else {
        processArr[i].icon = "../../img/process_1.png"
        processArr[i].start = "#EFF3F6"
        processArr[i].end = "#EFF3F6"
      }
    }
    processArr[index].icon = "../../img/process_2.png"
    processArr[index].end = "#EFF3F6"
    processArr[0].start = "#fff"
    processArr[this.data.detailData.progress.length - 1].end = "#fff"
    this.setData({
      processData: processArr    })
  },

3. CSS

.order_process {
  display: flex;
  flex-wrap: nowrap;
  padding: 10rpx 10rpx 20rpx 10rpx;
  background-color: #fff;}.process_wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;}.process {
  display: flex;
  align-items: center;
  width: 100%;}.process_icon {
  width: 50rpx;
  height: 50rpx;}.process_line {
  background: #eff3f6;
  flex: 1;
  height: 5rpx;}.process_name {
  font-size: 24rpx;
}