小程序?qū)崿F(xiàn)流程進度條功能的方法

小程序流程進度條展現(xiàn)十分常見，那么實現(xiàn)小程序流程進度條功能要如何做。

實現(xiàn)小程序流程進度條需求：

1. 沒完成的灰色小圓點表示
2. 完成的使用藍色小圓點設(shè)置

3. 當前狀態(tài)使用有外圈的小圓點表示

    

   實現(xiàn)起來比較簡單，實現(xiàn)思路，使用一個列表實現(xiàn)，列表中的每一個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 列表肯定需要一個數(shù)組啦數(shù)組如下面

   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: '維修結(jié)束',
         start: '#EFF3F6',
         end: '#EFF3F6',
         icon: '../../img/process_1.png'
       },
       {
         name: '已確認',
         start: '#EFF3F6',
         end: '#fff',
         icon: '../../img/process_1.png'
       }],
     },

   按照上面的item圖片我們會看到直接顯示的話兩邊會多處一條線來怎么去掉這兩條線呢，很簡單，讓父容器的背景顏色跟先的顏色一樣就好啦。

   把父布局的背景改為白色，然后控制列表中第一個item中的前面的線段的顏色為白色，最后一個item中的后面的線段為白色。這樣看起來兩邊的線段就去掉了

   當數(shù)據(jù)改變的時候，我們只需要改變數(shù)組中對象的屬性就好了。不如下面的做參考

   //進度條的狀態(tài)
     setPeocessIcon: function () {
       var index = 0//記錄狀態(tài)為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
       })
     },

   上面代碼的數(shù)據(jù)中，使用state代表完成和沒完成。我們把完成的設(shè)置為藍色 把沒完成的設(shè)置為灰色。

   使用 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;
   }

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序資訊，盡在：zytcm.com.cn/xiaocx/