微信小程序流程进度的图样式功能实现方法

微信小程序流程进度的图样式功能实现方法
在做微信开发的时候我们会遇到各种功能，本文就和大家分享要实现一个流程进度的图样式的方法。

在做微信开发的时候我们会遇到各种功能，本文就和大家分享要实现一个流程进度的图样式的方法。

 

需求：

没完成的灰色小圆点表示

完成的使用蓝色小圆点设置

当前状态使用有外圈的小圆点表示

实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图

 

使用win10画板画的不好看

图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点。

按照上面的图片，html布局为下面

<view class=&#39;order_process&#39;> <view class=&#39;process_wrap&#39; wx:for="{{processData}}" wx:key=""> <view class=&#39;process&#39;> <view class=&#39;process_line&#39; style="background:{{item.start}}"></view> <image class=&#39;process_icon&#39; src="{{item.icon}}"></image> <view class=&#39;process_line&#39; style="background:{{item.end}}"></view> </view> <text class=&#39;process_name&#39;>{{item.name}}</text> </view> </view>