【移动应用开发技术】微信小程序如何实现流程进度功能

【移动应用开发技术】微信小程序如何实现流程进度功能

在下给大家分享一下微信小程序如何实现流程进度功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！需求：没完成的灰色小圆点表示完成的使用蓝色小圆点设置当前状态使用有外圈的小圆点表示实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个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'>{{}}</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中的后面的线段为白色。这样看起来两边的线段就去掉了当数据改变的时候，我们只需要改变数组中对象的属性就好了。不如下面的做参考//进度条的状态

setPeocessIcon:

function

()

{

var

index

=

0//记录状态为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

})

},上面代码的数据中，使用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