首頁 > 文章 > 微信小程式 > 微信小程式流程進度的圖樣式功能實作方法

微信小程式流程進度的圖樣式功能實作方法

小云云原創: 2018-01-17 16:50:333008瀏覽

在做微信開發的時候我們會遇到各種功能，本文就和大家分享要實現一個流程進度的圖樣式的方法。

微信小程式流程進度的圖樣式功能實作方法

需求：

沒完成的灰色小圓點表示
完成的使用藍色小圓點設定
目前狀態使用有外圈的小圓點表示

實現起來比較簡單，實現思路，使用一個列表實現，列表中的每一個item的樣式如下圖

微信小程式流程進度的圖樣式功能實作方法 #

使用win10畫板畫的不好看

圖上的意思就是每個item 前面有一段線條中間是個圓圈然後後面有一段線條。之所以這樣是因為下面的文字需要居中顯示在圓圈的下面。如果不需要文字的話可以一個圓圈後面跟一條直線會比較簡單一點。

依照上面的圖片，html佈局為下面

 <view class=&#39;order_process&#39;>
  <view class=&#39;process_wrap&#39; wx:for="{{processData}}" wx:key="">
  <view class=&#39;process&#39;>
   <view class=&#39;process_line&#39; style="background:{{item.start}}"></view>
   <image class=&#39;process_icon&#39; src="{{item.icon}}"></image>
   <view class=&#39;process_line&#39; style="background:{{item.end}}"></view>
  </view>
  <text class=&#39;process_name&#39;>{{item.name}}</text>
  </view>
 </view>

OK 列表肯定需要一個數組啦數組如下面

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

按照上面的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;
}

微信小程式流程進度的圖樣式功能實作方法

相關文章