小程序怎么实现流程进度条功能

发布时间:2022-03-10 10:32:37 作者:iii
来源:亿速云 阅读:639

今天小编给大家分享一下小程序怎么实现流程进度条功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

小程序怎么实现流程进度条功能

实现小程序流程进度条需求:

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

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

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

     

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

    小程序怎么实现流程进度条功能
     

    使用win10画板画的不好看

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

     

     

  1. 按照上面的图片,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;
    }

以上就是“小程序怎么实现流程进度条功能”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. 微信小程序实现时间进度条功能
  2. 小程序实现投票进度条

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:小程序怎么自定义分析数据上报接口

下一篇:CSS语言如何绘制几何平行四边形

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》