【移動應(yīng)用開發(fā)技術(shù)】微信小程序如何實(shí)現(xiàn)流程進(jìn)度功能

【移動應(yīng)用開發(fā)技術(shù)】微信小程序如何實(shí)現(xiàn)流程進(jìn)度功能

在下給大家分享一下微信小程序如何實(shí)現(xiàn)流程進(jìn)度功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！需求：沒完成的灰色小圓點(diǎn)表示完成的使用藍(lán)色小圓點(diǎn)設(shè)置當(dāng)前狀態(tài)使用有外圈的小圓點(diǎn)表示實(shí)現(xiàn)起來比較簡單，實(shí)現(xiàn)思路，使用一個列表實(shí)現(xiàn)，列表中的每一個item的樣式如下圖使用win10畫板畫的不好看圖上的意思就是每個item前面有一段線條中間是個圓圈然后后面有一段線條。之所以這樣是因?yà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'>{{}}</text>

</view>

</view>OK列表肯定需要一個數(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圖片我們會看到直接顯示的話兩邊會多處一條線來怎么去掉這兩條線呢，很簡單，讓父容器的背景顏色跟先的顏色一樣就好啦。把父布局的背景改為白色，然后控制列表中第一個item中的前面的線段的顏色為白色，最后一個item中的后面的線段為白色。這樣看起來兩邊的線段就去掉了當(dāng)數(shù)據(jù)改變的時(shí)候，我們只需要改變數(shù)組中對象的屬性就好了。不如下面的做參考//進(jìn)度條的狀態(tài)

setPeocessIcon:

function

()

{

var

index

=

0//記錄狀態(tài)為1的最后的位置

var

processArr

=

cessData

//

console.log("progress",

this.data.detailDgress)

for

(var

i

=

0;

i

<

this.data.detailDgress.length;

i++)

{

var

item

=

this.data.detailDgress[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.detailDgress.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表示完成的最后一個）。最后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