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


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 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
js保留两位小数方法总结
Jan 31 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python模拟Django框架实例
2016/05/17 Python
简单实现Python爬取网络图片
2018/04/01 Python
django 多数据库配置教程
2018/05/30 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
pywinauto自动化操作记事本
2019/08/26 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
老教师工作总结的自我评价
2013/09/27 职场文书
酒店个人求职信范文
2014/01/25 职场文书
学习考察心得体会
2014/09/04 职场文书
感恩的心主题班会
2015/08/12 职场文书
2016教师国培研修感言
2015/12/08 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript