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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了貴溪免費(fèi)建站歡迎大家使用！

需求：

1. 沒(méi)完成的灰色小圓點(diǎn)表示

2. 完成的使用藍(lán)色小圓點(diǎn)設(shè)置

3. 當(dāng)前狀態(tài)使用有外圈的小圓點(diǎn)表示

   實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，實(shí)現(xiàn)思路，使用一個(gè)列表實(shí)現(xiàn)，列表中的每一個(gè)item的樣式如下圖

   

   使用win10畫(huà)板畫(huà)的不好看

   圖上的意思就是每個(gè)item 前面有一段線條 中間是個(gè)圓圈然后后面有一段線條。之所以這樣是因?yàn)橄旅娴奈淖中枰又酗@示在圓圈的下面。如果不需要文字的話可以一個(gè)圓圈后面跟一條直線會(huì)更簡(jiǎn)單一點(diǎn)。

按照上面的圖片，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 列表肯定需要一個(gè)數(shù)組啦數(shù)組如下面

processData: [{
      name: '提交工單',
      start: '#fff',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '已接單',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '開(kāi)始維修',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '維修結(jié)束',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '已確認(rèn)',
      start: '#EFF3F6',
      end: '#fff',
      icon: '../../img/process_1.png'
    }],
  },

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

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

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

//進(jìn)度條的狀態(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代表完成和沒(méi)完成。我們把完成的設(shè)置為藍(lán)色 把沒(méi)完成的設(shè)置為灰色。

使用 index 來(lái)記錄是不是當(dāng)前點(diǎn)（當(dāng)前點(diǎn)就是state表示完成的最后一個(gè)）。

最后css中的代碼也很簡(jiǎn)單

.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;
}

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

分享題目：微信小程序如何實(shí)現(xiàn)流程進(jìn)度功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://www.chinadenli.net/article34/dehipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、搜索引擎優(yōu)化、云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)站排名、App開(kāi)發(fā)

廣告

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