微信小程序?qū)崿F(xiàn)流程進(jìn)度功能
最近正在做微信小程序，需要實(shí)現(xiàn)一個(gè)流程進(jìn)度的圖樣式如下面
需求：
- 沒完成的灰色小圓點(diǎn)表示
- 完成的使用藍(lán)色小圓點(diǎn)設(shè)置
-
當(dāng)前狀態(tài)使用有外圈的小圓點(diǎn)表示
實(shí)現(xiàn)起來比較簡(jiǎn)單，實(shí)現(xiàn)思路，使用一個(gè)列表實(shí)現(xiàn)，列表中的每一個(gè)item的樣式如下圖
使用win10畫板畫的不好看
圖上的意思就是每個(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: '開始維修',
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ì)多處一條線來怎么去掉這兩條線呢，很簡(jiǎn)單，讓父容器的背景顏色跟先的顏色一樣就好啦。
把父布局的背景改為白色，然后控制列表中第一個(gè)item中的前面的線段的顏色為白色，最后一個(gè)item中的后面的線段為白色。這樣看起來兩邊的線段就去掉了
當(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代表完成和沒完成。我們把完成的設(shè)置為藍(lán)色 把沒完成的設(shè)置為灰色。
使用 index 來記錄是不是當(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;
}
