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

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

需求:

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

总结

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

(0)

相关推荐

  • 微信小程序 简单DEMO布局,逻辑,样式的练习

    微信小程序 布局实例: 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分界线 <!--最外层--> <view class="home-view1"> <!--图片层--> <view class="home-view2"> <image class="home-image1" src

  • 微信小程序点击控件修改样式实例详解

    微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .norm

  • 微信小程序 小程序制作及动画(animation样式)详解

    微信小程序制作 实现效果图: 微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 在看到上图,小伙伴

  • 微信小程序 JS动态修改样式的实现代码

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下: <!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi

  • 微信小程序自定义弹窗wcPop插件

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事

  • 微信小程序实现给循环列表添加点击样式实例

    微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie

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

    最近正在做微信小程序,需要实现一个流程进度的图样式如下面 需求: 没完成的灰色小圆点表示 完成的使用蓝色小圆点设置 当前状态使用有外圈的小圆点表示 实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个item的样式如下图 使用win10画板画的不好看 图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条.之所以这样是因为下面的文字需要居中显示在圆圈的下面.如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点. 按照上面的图片,html布局为下面 <view cl

  • 详解微信小程序——自定义圆形进度条

    微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con

  • 微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等

    1)网络 API 列表: wx.request 发起网络请求 wx.uploadFile 上传文件 wx.downloadFile 下载文件 wx.connectSocket 创建 WebSocket 连接 wx.onSocketOpen 监听 WebSocket 打开 wx.onSocketError 监听 WebSocket 错误 wx.sendSocketMessage 发送 WebSocket 消息 wx.onSocketMessage 接受 WebSocket 消息 wx.closeS

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • 微信小程序之圆形进度条实现思路

    需求概要 小程序中使用圆形倒计时,效果图: 思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"

  • 微信小程序实现3D轮播图效果(非swiper组件)

    本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下 首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b

  • 微信小程序自定义音乐进度条的实例代码

    需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图 初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend

  • 微信小程序画布圆形进度条显示效果

    本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv

  • 微信小程序实现环形进度条

    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 index.wxss .circle {   position: absolute;   left: 0;   right: 0;   margin: auto; } index.wxml <canvas class="circle" style="z-index: 1;" canvas-id="canvasArcCir"></canvas>

随机推荐