专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:黄珊
小程序流程进度条展现十分常见,那么实现小程序流程进度条功能要如何做。
实现小程序流程进度条需求:
当前状态使用有外圈的小圆点表示
实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个item的样式如下图
使用win10画板画的不好看
图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点。
按照上面的图片,html布局为下面
<view class='order_process'> <view class='process_wrap' wx:for="{{processData}}" wx:key=""> <view class='process'> <view class='process_line' ></view> <image class='process_icon' src="{{item.icon}}"></image> <view class='process_line' ></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; }
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。
更多小程序资讯,尽在:www.hishop.com.cn/xiaocx/
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
微信小程序能够很好连接线下商户与用户之间的关系,并将线上用户有效引流到线下门店,那么对于商户来说,需要如何添加...
如何获得好的运营效益,是微信支付团队和商户共同关心的“商业秘籍”。 在刚刚结束的2018年微信支付成长计划服务商大会...
在微信,如何让用户更便捷地找到你的服务?一搜即可。 今天, 微信“功能直达” 正式开放 ,商家与用户的距离可以更“...
针对部分小程序跳转中暴露出的问题,微信表示将弥补小程序跳转上的缺陷,调整相关规则。具体措施如下:...
分销裂变是什么 分销裂变模式是一种基于社交关系网络的营销模式,借助互联网社交工具,实现商品或服务的推广与销售增...
分销系统小程序需包含哪些核心模块? 分销系统小程序是借助社交关系链实现产品推广与销售的工具,其核心模块的设计直接...
小程序商城vs微商城,功能、体验的对比 在数字化商业浪潮中,微商城和小程序商城已成为商家开拓线上业务的热门选择。二...
如何从0到1做分销?90%品牌在用的裂变模式 分销,简单说就是品牌或商家通过发展分销者,让他们利用自身资源推广产品,达...
5种常见的小程序类型,看看你适合做哪种 小程序类型商城是一种基于小程序平台的在线购物系统,它让商家能通过小程序为...
分销小程序的6大主流模式推荐 分销小程序,是基于微信小程序开发的电商解决方案,借助微信庞大用户基础,商家将商品推...