小編給大家分享一下微信小程序流程進度的圖樣式功能如何實現(xiàn)，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是一家從事企業(yè)網站建設、成都做網站、成都網站設計、成都外貿網站建設、行業(yè)門戶網站建設、網頁設計制作的專業(yè)網站設計公司，擁有經驗豐富的網站建設工程師和網頁設計人員，具備各種規(guī)模與類型網站建設的實力，在網站建設領域樹立了自己獨特的設計風格。自公司成立以來曾獨立設計制作的站點近千家。

需求：

1. 沒完成的灰色小圓點表示

2. 完成的使用藍色小圓點設置

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' style="background:{{item.start}}"></view>
   <image class='process_icon' src="{{item.icon}}"></image>
   <view class='process_line' style="background:{{item.end}}"></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中的后面的線段為白色。這樣看起來兩邊的線段就去掉了

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

//進度條的狀態(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
 })
 },

上面代碼的數據中，使用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;
}

看完了這篇文章，相信你對“微信小程序流程進度的圖樣式功能如何實現(xiàn)”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網頁題目：微信小程序流程進度的圖樣式功能如何實現(xiàn)-創(chuàng)新互聯(lián)
標題網址：http://jinyejixie.com/article24/djeoje.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站設計、網站導航、微信小程序、軟件開發(fā)、網站制作、響應式網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)