当前位置:首页 > 编程教程 > javascript技术文章 > 微信小程序实现流程进度的图样式功能

微信小程序实现流程进度样式代码

  • 发布时间:
  • 作者:码农之家
  • 点击:169

这篇文章主要知识点是关于微信小程序、流程进度样式、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

从零开始学微信小程序开发
  • 类型:小程序大小:50.1 MB格式:PDF作者:高洪涛
立即下载

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

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

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

需求:

  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' ></view>
   <image class='process_icon' src="{{item.icon}}"></image>
   <view class='process_line' ></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;
}

总结

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 微信小程序中生成带参小程序码流程方法
  • 微信小程序 相关电子书
    学习笔记
    网友NO.111684

    微信小程序中生成带参小程序码流程方法

    本文实例为大家分享了小程序生成带参小程序码的具体步骤,供大家参考,具体内容如下 生成带参小程序码流程 1、小程序端上传生成二维码所需的参数到云函数 2、云函数使用 appid 和 appsecret 请求 access_token 3、云函数使用 access_token + 小程序端上传的参数生成二维码 4、云函数将生成的二维码返回到小程序端(或者存到数据库返回fileID,小程序端用fileID进行获取,后续生成先在数据库查找,数据库没有再执行生成操作,防止重复生成小程序码文件) 小程序端上传小程序码所需的参数 wx.cloud.callFunction({ name: getImage, // 云函数名称 data: { // 小程序码所需的参数 page: pages/xxxx/xxxx, id: id, }, complete: res = { console.log(callFunction test result: , res) this.setData({ // 获取返回的小程序码 xcxCodeImageData: res.result, }) }}) 云函数用 appid 和 appsecret 请求 access_token 创建云函数 getImage ,……

    网友NO.230224

    微信支付的开发流程详解

    最近在公司做了微信支付的接入,这里总结下开发的一些经验 注意,我使用的是微信开放平台的支付,与手机app相关,而与公众账号无关。 微信支付的主要操作流程 1.用户浏览app,选定商品然后下单。 2.服务器处理订单逻辑,开始正式发起支付流程 3.首先,后台服务器向weixin服务器发起请求,获取一个token。 4.后台服务器拿到token,使用和其他参数加密,再次向weixin服务器发起请求,获取一个预支付prepayid 5.后台服务器将该prepayid返回给app客户端 6.app调用手机上的微信控件,完成付款流程。 7.app向后台服务器发起一个回调请求,通知服务器交易完成。 8.weixin服务器处理完所有的流程后,向后台服务器发起一个post请求,正式通知后台服务器交易完毕 上面流程的一些注意点: 1.每次获取的token是有时效的,默认是7200s,而且每天最多获取200次,因此最好放……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com