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


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 相关文章推荐
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
javascript连续赋值问题
Jul 08 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
Vue组件跨层级获取组件操作
Jul 27 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
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
Python实现动态图解析、合成与倒放
2018/01/18 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
如何开发一个JQuery插件
2016/07/28 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
自荐信如何制作?
2014/02/21 职场文书
开学典礼主持词
2014/03/19 职场文书
抽奖活动主持词
2014/03/31 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
村党支部书记承诺书
2014/05/29 职场文书
管理提升方案
2014/06/04 职场文书
法人授权委托书
2014/09/16 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书