小程序流程进度条展现十分常见，，，，那么实现小程序流程进度条功效要怎样做。。。。。

实现小程序流程进度条需求：

1. 没完成的灰色小圆点体现
2. 完成的使用蓝色小圆点设置

3. 目今状态使用有外圈的小圆点体现

    

   实现起来较量简朴，，，，实现思绪，，，，使用一个列表实现，，，，列表中的每一个item的样式如下图

   
    

   使用win10画板画的欠悦目

   图上的意思就是每个item 前面有一段线条 中心是个圆圈然后后面有一段线条。。。。。之以是这样是由于下面的文字需要居中显示在圆圈的下面。。。。。若是不需要文字的话可以一个圆圈后面跟一条直线会更简朴一点。。。。。

    

    

   

   凭证上面的图片，，，，html结构为下面

    

      <view class='order_process'>
         <view class='process_wrap' wx:for="{{processData}}" wx:key="">
           <view class='process'>
             <view class='process_line' ></view>
             <image class='process_icon' src="{{item.icon}}"></image>
             <view class='process_line' ></view>
           </view>
           <text class='process_name'>{{item.name}}</text>
         </view>
       </view>

   OK 列表肯定需要一个数组啦数组如下面

   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'
       }],
     },

   凭证上面的item图片我们会看到直接显示的话双方会多处一条线来怎么去掉这两条线呢，，，，很简朴，，，，让父容器的配景颜色跟先的颜色一样就好啦。。。。。

   把父结构的配景改为白色，，，，然后控制列表中第一个item中的前面的线段的颜色为白色，，，，最后一个item中的后面的线段为白色。。。。。这样看起来双方的线段就去掉了

   当数据改变的时间，，，，我们只需要改变数组中工具的属性就好了。。。。。不如下面的做参考

   //进度条的状态
     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
       })
     },

   上面代码的数据中，，，，使用state代表完成和没完成。。。。。我们把完成的设置为蓝色 把没完成的设置为灰色。。。。。

   使用 index 来纪录是不是目今点（目今点就是state体现完成的最后一个）。。。。。

   最后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;
   }

小程序工具提供多类型商城/门店小程序制作，，，，可视化编辑 1秒天生5步上线。。。。。通过拖拽、拼接
？？？榻峁剐〕绦蛏坛且趁，，，，所看即所得，，，，只需要美工就能做出细腻商城。。。。。

更多微信小程序相关资讯，，，，请前往：/miniprogramschool/