189 8069 5689

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

小编给大家分享一下微信小程序流程进度的图样式功能如何实现，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联服务项目包括中山网站建设、中山网站制作、中山网页制作以及中山网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，中山网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到中山省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

需求：

  1. 没完成的灰色小圆点表示

  2. 完成的使用蓝色小圆点设置

  3. 当前状态使用有外圈的小圆点表示

实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图

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

使用win10画板画的不好看

图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点。

按照上面的图片，html布局为下面

 
  
  
   
   
   
  
  {{item.name}}
  
 

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;
}

看完了这篇文章，相信你对“微信小程序流程进度的图样式功能如何实现”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


文章标题：微信小程序流程进度的图样式功能如何实现
分享链接：http://cdxtjz.cn/article/pdeeos.html

其他资讯