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


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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
php开发文档 会员收费1期
2012/08/14 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript 事件对象的实现
2009/07/13 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
js中有关IE版本检测
2012/01/04 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
python matlab库简单用法讲解
2020/12/31 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
售后服务承诺书
2014/03/26 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
python 中的@运算符使用
2021/05/26 Python
python的html标准库
2022/04/29 Python