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


Posted in Javascript onJanuary 16, 2018

最近正在做微信小程序,需要实现一个流程进度的图样式如下面

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

需求:

  1. 没完成的灰色小圆点表示
  2. 完成的使用蓝色小圆点设置
  3. 当前状态使用有外圈的小圆点表示

实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个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;
}

总结

以上所述是小编给大家介绍的微信小程序实现流程进度的图样式功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
探索node之事件循环的实现
Oct 30 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 #Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 #Javascript
详解layui中的树形关于取值传值问题
Jan 16 #Javascript
基于JavaScript实现抽奖系统
Jan 16 #Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 #Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 #Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 #Javascript
You might like
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue2.x数组劫持原理的实现
2020/04/19 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
毕业生自荐信
2013/12/14 职场文书
《争吵》教学反思
2014/02/15 职场文书
搞笑爱情保证书
2014/04/29 职场文书
外贸业务员求职信
2014/06/16 职场文书
迟到检讨书范文
2015/01/27 职场文书
医院保洁员管理制度
2015/08/05 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers