介绍
小编给大家分享一下微信小程序流程进度的图样式功能如何实现,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
<李>
没完成的灰色小圆点表示
<李>
完成的使用蓝色小圆点设置
<李>
当前状态使用有外圈的小圆点表示
实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个条目的样式如下图
, & lt; view 类=& # 39;order_process& # 39;比;
& lt;才能view 类=& # 39;process_wrap& # 39;,天气:为=皗{processData}},,天气:关键=?“在
& lt;才能view 类=& # 39;过程# 39;比;
,,& lt; view 类=& # 39;process_line& # 39;,风格=氨尘?{{item.start}}“祝辞& lt;/view>
,,& lt; image 类=& # 39;process_icon& # 39; https://www.yisu.com/zixun/, src=" {{item.icon}} ">
<视图类=皃rocess_line”风格="背景:{{item.end}} ">
<文本类=' process_name '> {{item.name}}
好列表肯定需要一个数组啦数组如下面
processData:, [{
,,名字:& # 39;提交工单& # 39;,
,,开始:& # 39;# fff& # 39;
,,:& # 39;# EFF3F6& # 39;
图标才能:& # 39;. ./. ./img/process_1.png& # 39;
},
,{
,,名字:& # 39;已接单& # 39;,
,,开始:& # 39;# EFF3F6& # 39;
,,:& # 39;# EFF3F6& # 39;
图标才能:& # 39;. ./. ./img/process_1.png& # 39;
},
,{
,,名字:& # 39;开始维修& # 39;,
,,开始:& # 39;# EFF3F6& # 39;
,,:& # 39;# EFF3F6& # 39;
图标才能:& # 39;. ./. ./img/process_1.png& # 39;
},
,{
,,名字:& # 39;维修结束& # 39;,
,,开始:& # 39;# EFF3F6& # 39;
,,:& # 39;# EFF3F6& # 39;
图标才能:& # 39;. ./. ./img/process_1.png& # 39;
},
,{
,,名字:& # 39;已确认& # 39;,
,,开始:& # 39;# EFF3F6& # 39;
,,:& # 39;# fff& # 39;
图标才能:& # 39;. ./. ./img/process_1.png& # 39;
}),
}, 按照上面的项目图片我们会看到直接显示的话两边会多处一条线来怎么去掉这两条线呢,很简单,让父容器的背景颜色跟先的颜色一样就好啦。
把父布局的背景改为白色,然后控制列表中第一个项目中的前面的线段的颜色为白色,最后一个项目中的后面的线段为白色。这样看起来两边的线段就去掉了
当数据改变的时候,我们只需要改变数组中对象的属性就好了。不如下面的做参考
//进度条的状态
,setPeocessIcon: function (), {
,var index =, 0//记录状态为1的最后的位置
,var processArr =this.data.processData
,//console.log (“progress",, this.data.detailData.progress)
,for (var 小姐:=,0;,小姐:& lt;, this.data.detailData.progress.length;,我+ +),{
var 才能;item =, this.data.detailData.progress[我]
processArr才能[我].name =item.word
if 才能;(item.state ==, 1), {
index =,我才能
processArr才能[我].icon =,“. ./. ./img/process_3.png"
processArr才能[我].start =,“# 45 b2fe"
processArr才能[我].end =,“# 45 b2fe"
,,},{else
processArr才能[我].icon =,“. ./. ./img/process_1.png"
processArr才能[我].start =,“# EFF3F6"
processArr才能[我].end =,“# EFF3F6"
,,}
,}
(指数),processArr .icon =,“. ./. ./img/process_2.png"
(指数),processArr .end =,“# EFF3F6"
,processArr [0] .start =,“# fff"
,processArr [this.data.detailData.progress.length 作用;1].end =,“# fff"
,this.setData ({
processData才能:processArr
,})
}, 上面代码的数据中,使用国家代表完成和没完成。我们把完成的设置为蓝色把没完成的设置为灰色。
使用指数来记录是不是当前点(当前点就是状态表示完成的最后一个)。
