微信小程式可以說是非常火紅了,最近正在做微信小程序,需要實現一個流程進度功能,本文主要和大家分享微信小程式實現流程進度功能,希望能幫助到大家,的圖樣式如下面:
需求:
#沒完成的灰色小圓點表示
完成的使用藍色小圓點設定
當前狀態使用有外圈的小圓點表示
實現起來比較簡單,實現思路,使用一個列表實現,列表中的每一個item的樣式如下圖
使用win10畫板畫的不好看
##圖上的意思就是每個item 前面有一段線條中間是個圓圈然後後面有一段線條。之所以這樣是因為下面的文字需要居中顯示在圓圈的下面。如果不需要文字的話可以一個圓圈後面跟一條直線會比較簡單一點。<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>
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' }], },
//进度条的状态 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 }) },
.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; }
以上是微信小程式實作流程進度功能實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!