时间:2021-05-18
最近正在做微信小程序,需要实现一个流程进度的图样式如下面
需求:
实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个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'>{{item.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 = 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 }) },上面代码的数据中,使用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_icon { width: 50rpx; height: 50rpx;}.process_line { background: #eff3f6; flex: 1; height: 5rpx;}.process_name { font-size: 24rpx;}总结
以上所述是小编给大家介绍的微信小程序实现流程进度的图样式功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
先上图样式设置:在小程序社区看了下,说是伪类造成的。于是就重新定义下样式。然后就ok了。总结以上所述是小编给大家介绍的微信小程序分享功能之按钮button边框隐
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然
本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果
微信小程序实现给循环列表添加点击样式实例微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但
在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场前言微信小程序canvas实现签名功能核心内容简介:(1)签名实现,开始,移动,结