微信小程序:实现节点进度条的效果；正在完成的节点有动态循环效果；横向，纵向排列

已于 2024-12-19 08:36:37 修改
阅读量960 收藏 3
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序 notepad++ 小程序
于 2024-12-12 11:53:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46001736/article/details/144422210

参考说明

微信小程序实现流程进度功能 - 知乎

上面的为一个节点进度条的例子，但并不完整，根据上述代码，进行修改完善，实现其效果

横向效果

代码

wxml

<view class='order_process'>
  <view class='process_wrap' wx:for="{{processData}}" wx:key="index">
    <view class='process'>
      <view class='process_line' style="background:{{item.start}}"></view>
      <image class="process_icon {{item.icon === icon2 ? 'rotate-icon' : ''}}" src="{{item.icon}}"></image>
      <view class='process_line' style="background:{{item.end}}"></view>
    </view>
    <text class='process_name'>{{item.name}}</text>
  </view>
</view>

wxss

.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: 35rpx;
  height: 35rpx;
}
.process_line {
  background: #eff3f6;
  flex: 1;
  height: 5rpx;
}
.process_name {
  font-size: 24rpx;
}
/* 定义旋转动画 */
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 应用到 .rotate-icon 类 */
.rotate-icon {
  animation: rotate360 5s linear infinite; /* 5秒完成一次旋转，线性时间函数，无限循环 */
}

js

Page({
  data: {
    icon1: '../img/process_1.png',
    icon2: '../img/process_2.png',
    icon3: '../img/process_3.png',
    processData: [],//节点信息
  },
  onLoad: function () {
    // 初始化数据 processData
    const data = [{
        name: '节点1',
        start: '#fff',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0
      },
      {
        name: '节点2',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0
      },
      {
        name: '节点3',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 1
      },
      {
        name: '节点4',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0
      },
      {
        name: '节点5',
        start: '#f9d9dd',
        end: '#fff',
        icon: this.data.icon1,
        state: 0
      }
    ]
    this.setData({
      processData: data
    })
    // 处理节点信息
    this.setProcessIcon();
  },
  setProcessIcon: function () {
    const processArr = this.data.processData;
    let index = -1; // 记录状态为1的最后的位置
  
    // 首先找到状态为1的节点位置
    processArr.forEach((item, i) => {
      if (item.state === 1) {
        index = i;
        return false; // 找到后停止循环
      }
    });
  
    // 然后根据找到的位置设置图标和其他属性
    processArr.forEach((item, i) => {
      if (i === index) { // 当前正在处理的节点
        item.icon = this.data.icon2;
        item.start = "#f0a0a9";
        item.end = "#f9d9dd";
      } else if (i < index && index !== -1) { // 已完成的节点
        item.icon = this.data.icon3;
        item.start = "#f0a0a9";
        item.end = "#f0a0a9";
      } else { // 未完成的节点
        item.icon = this.data.icon1;
        item.start = "#f9d9dd";
        item.end = "#f9d9dd";
      }
    });
  
    // 特殊处理第一个和最后一个节点
    if (processArr.length > 0) {
      processArr[0].start = "#fff";
      processArr[processArr.length - 1].end = "#fff";
    }
  
    this.setData({
      processData: processArr
    });
  }
});

纵向效果

代码

wxml

<view class='order_process1'>
  <view class='process_item1' wx:for="{{processData}}" wx:key="index">
    <view class='process_vertical1'>
      <view class='process_line_vertical1' style="background:{{item.start}};"></view>
      <image class="process_icon1 {{item.icon === icon2 ? 'rotate-icon1' : ''}}" src="{{item.icon}}"></image>
      <view class='process_line_vertical1' style="background:{{item.end}};"></view>
    </view>
    <text class='process_name1'>{{item.name}}</text>
  </view>
</view>

wxss

.order_process1 {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  padding: 10rpx;
  background-color: #fff;
}

.process_item1 {
  display: flex;
  flex-direction: row; /* 每个步骤项水平排列 */
  align-items: center; /* 垂直居中对齐 */
}

.process_vertical1 {
  display: flex;
  flex-direction: column; /* 步骤线垂直排列 */
  align-items: center; /* 图标居中 */
}

.process_icon1 {
  width: 35rpx;
  height: 35rpx;
}

.process_line_vertical1 {
  background: #eff3f6;
  width: 5rpx; /* 宽度变为5rpx */
  height: 40rpx; /* 高度根据需要设置 */
}

.process_name1 {
  font-size: 24rpx;
  margin-left: 20rpx; /* 文字与图标之间的间距 */
}

/* 定义旋转动画 */
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 应用到 .rotate-icon1 类 */
.rotate-icon1 {
  animation: rotate360 5s linear infinite; /* 5秒完成一次旋转，线性时间函数，无限循环 */
}

js

参见横向js代码

图片展示 

process_1.png

process_2.png

process_3.png

扩展

已完成的状态均设置为1

Page({
  data: {
    icon1: '../img/process_1.png',
    icon2: '../img/process_2.png',
    icon3: '../img/process_3.png',
    processData: [], // 节点信息
  },
  onLoad: function () {
    // 初始化数据 processData, 将当前节点及之前的所有节点状态设置为1
    const data = [{
        name: '节点1',
        start: '#fff',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 1 // 已完成
      },
      {
        name: '节点2',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 1 // 已完成
      },
      {
        name: '节点3',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 1 // 当前处理中
      },
      {
        name: '节点4',
        start: '#f9d9dd',
        end: '#f9d9dd',
        icon: this.data.icon1,
        state: 0 // 未开始
      },
      {
        name: '节点5',
        start: '#f9d9dd',
        end: '#fff',
        icon: this.data.icon1,
        state: 0 // 未开始
      }
    ];
    this.setData({
      processData: data
    });
    // 处理节点信息
    this.setProcessIcon();
  },
  setProcessIcon: function () {
    const processArr = this.data.processData;
    let index = -1; // 记录状态为1的最后的位置

    // 首先找到状态为1的最后节点位置
    processArr.forEach((item, i) => {
      if (item.state === 1) {
        index = i;
      }
    });

    // 然后根据找到的位置设置图标和其他属性
    processArr.forEach((item, i) => {
      if (i <= index) { // 当前正在处理的节点和已完成的节点
        item.icon = i === index ? this.data.icon2 : this.data.icon3;
        item.start = i === 0 ? "#fff" : "#f0a0a9";
        item.end = i === index ? "#f9d9dd" : "#f0a0a9";
      } else { // 未完成的节点
        item.icon = this.data.icon1;
        item.start = "#f9d9dd";
        item.end = "#f9d9dd";
      }
    });

    // 特殊处理最后一个节点
    if (processArr.length > 0) {
      processArr[processArr.length - 1].end = "#fff";
    }

    this.setData({
      processData: processArr
    });
  }
});

数据部分优化

其实可以只保留name和state

const data = [{
    name: '节点1',
    start: '',
    end: '',
    icon: '',
    state: 1 
  },
  {
    name: '节点2',
    start: '',
    end: '',
    icon: '',
    state: 1 
  },
  {
    name: '节点3',
    start: '',
    end: '',
    icon: '',
    state: 1 
  },
  {
    name: '节点4',
    start: '',
    end: '',
    icon: '',
    state: 0 
  },
  {
    name: '节点5',
    start: '',
    end: '',
    icon: '',
    state: 0 
  }
];

新的逻辑效果：调整正在直接节点的位置(附加完整解析)

将正在执行的节点，设置为最后一个已完成节点的下一个节点

Page({
  data: {
    icon1: '../img/process_1.png',//未完成图标
    icon2: '../img/process_2.png',//正在进行的图标
    icon3: '../img/process_3.png',//已完成图标
    processData: [], // 节点信息
  },
  onLoad: function () {
    // 初始化数据 ,name:显示的节点名称；start：表示开始线段的颜色；end：表示结束线段的颜色；icon：表示节点的图标显示
    // state：表示当前节点的状态（已完成表示1，未完成表示0）
    // 这里的start和end表示节点的前后两条线段,每个节点都含有start前线段和end尾线段
    const data = [
      {name: '节点1',start: '',end: '',icon: '',state: 1},
      {name: '节点2',start: '',end: '',icon: '',state: 1},
      {name: '节点3',start: '',end: '',icon:'',state: 0},
      {name: '节点4',start: '',end: '',icon:'',state: 0},
      {name: '节点5',start: '',end: '',icon:'',state: 0}
    ];
    this.setData({
      processData: data
    });
    // 处理节点信息
    this.setProcessIcon();
  },
  //将节点信息进行效果展示
  setProcessIcon: function () {
    const processArr = this.data.processData;//获取节点的完整信息
    let lastIndex = -1; // 记录状态为1的最后的位置
    // 找到状态为1的最后节点位置
    processArr.forEach((item, i) => {
      // 循环全部节点信息，如果state为1，就设置lastIndex的值为当前索引，
      // 这里一直会被赋值知道最后一个sate为1出现，lastIndex的值就为最后一个satae的索引，
      // 例如这里第一条，和第二条state为1，第一次对第一条进行赋值，lastIndex = 0；第二次对第二条进行赋值，lastIndex = 1，所以lastIndex = 1
      if (item.state === 1) {
        lastIndex = i;
      }
    });
    // 判断是否所有节点都已完成或未开始：allCompleted和allNotStarted的数值是bool类型，如果后面判断成立为true，反之为false
    // 判断是否全部完成：判断最后一个节点的索引是否是节点信息长度-1。（判断最后一个为状态为1的节点是否是最后一个节点）
    // 例如有三条数据，我的索引是0，1，2；如果我索引是2，那要对齐需要长度3-1才行
    const allCompleted = lastIndex === processArr.length - 1;
    // 判断是否全部未完成：如果lastIndex在<找到状态为1的最后节点位置>中为进行赋值，也就是为初始数据-1的时候，表明数据中没有state为1的数据，那就是全都未开始
    const allNotStarted = lastIndex === -1;
    // 根据条件设置图标和其他属性，循环全部节点信息对每一项进行设置
    processArr.forEach((item, i) => {
      // 如果所有节点都未开始
      if (allNotStarted) { 
        // 如果当前索引等于0（也就是第一个节点（索引为0））：就设置图标为正在执行状态icon2。
        // 反之(其余节点)设置图标为未完成图标icon1
        item.icon = i === 0 ? this.data.icon2 : this.data.icon1;
        // 如果当前索引等于0（也就是第一个节点（索引为0））：就设置节点的开始线段为白色(和背景色一致表示隐藏)。
        // 反之(其余节点)设置开始线段的颜色为未完成的浅粉色
        // 简而言之,设置第一个节点的开始线段隐藏,其余节点的开始线段为浅粉色
        item.start = i === 0 ? "#fff" : "#f9d9dd";
        // 如果当前索引等于全部节点长度-1（也就是最后节点）：就设置节点的结束线段为白色(和背景色一致表示隐藏)。
        // 反之(其余节点)设置结束线段的颜色为未完成的浅粉色
        // 简而言之,设置最后节点的结束线段隐藏,其余节点的结束线段为浅粉色
        item.end = i === processArr.length - 1 ? "#fff" : "#f9d9dd";
      }
      // 如果所有节点都已完成
      else if (allCompleted) { 
        //设置全部节点的图标为已完成图标icon3
        item.icon = this.data.icon3;
        //如果是第一个节点,那么它的开始线段隐藏(白色);如果是其余节点,开始线段设置为深粉色
        item.start = i === 0 ? "#fff" : "#f0a0a9";
        //如果是最后一个节点,那么它的结束线段隐藏(白色);如果是其余节点,结束线段设置为深粉色
        item.end = i === processArr.length - 1 ? "#fff" : "#f0a0a9";
      }
      // 中间节点-正常情况
      else { 
        // 已完成的节点
        // 如果当前索引小于等于最后一个state为1的节点，表示已完成(这里的例子lastIndex=1，也就是这里前两条0，1满足)
        if (i <= lastIndex) { 
          //设置已完成的节点图标为icon3
          item.icon = this.data.icon3;
          //设置第一个节点的开始线段隐藏(白色)，反之已完成的节点的开始线段为深粉色
          item.start = i === 0 ? "#fff" : "#f0a0a9";
          //设置最后一个节点的结束线段隐藏(白色)，反之已完成的节点的结束线段为深粉色
          item.end = i === lastIndex ? "#f0a0a9" : "#f0a0a9";
        } 
        // 下一个即将开始的节点
        // 这里设置正在执行的节点(节点未完成，但正在执行，介于未完成和已完成之间)
        // 该节点位于state=1的数据的下一条数据，也就是最后一个于state=1的索引+1
        else if (i === lastIndex + 1) {
          //设置这个正在进行的节点的图标为icon2
          item.icon = this.data.icon2;
          //设置这个节点的开始线段为深粉色(已完成线段颜色)
          item.start = "#f0a0a9";
          //设置这个节点的结束线段为浅粉色(未完成线段颜色)
          item.end = "#f9d9dd";
        } 
        // 未完成的节点
        else { 
          //设置节点图标为icon
          item.icon = this.data.icon1;
          //设置全部未完成节点的开始线段为浅粉色
          item.start = "#f9d9dd";
          //如果是最后一个节点，就隐藏它的结束线段(白色)，如果不是最后一个节点，就设置结束线段颜色为浅粉色
          item.end = i === processArr.length - 1 ? "#fff" : "#f9d9dd";
        }
      }
    });
    //替换新的节点数据
    this.setData({
      processData: processArr
    });
  }
});

微信小程序｜进度条
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
07-29 6471
进度条是一个常见的用户界面元素，用于显示任务或操作的完成进度，可以在任何需要指示任务进度的情况下使用，以提供更好的用户体验和反馈。
微信小程序-页面开发
陆卿之的博客
01-02 3917
页面开发
微信小程序 实现进度条效果
weixin_71403100的博客
01-24 5038
微信小程序中的原生进度条组件（Progress）只能显示一种进度状态，但有时我们需要展示多种状态，比如预算已使用与本次申请的进度。为了实现这一功能，我采用了 canvas 来绘制多种状态的进度条。记录下小程序原生组件 Progress 的单状态使用，以及通过 canvas 实现多状态进度条的方法。
微信小程序环形进度条实现与自定义
最新发布
weixin_42609225的博客
07-17 421
红色
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
weixin_39959505的博客
12-20 735
微信小程序 自定义圆形进度条，具体如下：无图无真相，先上图：实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。代码实现：JS代码：Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},onReady: function () {// 页面渲染完成var cxt_arc = wx.createCanv...
微信小程序之进度条
qq_39772439的博客
03-25 704
只需要把微信那边代码复制过来即可，其他的改成自己动态数据就行。点击链接就可以查看很详细。percent:百分比值。
微信小程序制作圆形进度条
老D工作室
04-10 2685
选择一个目录建立一个文件夹，比如 mycircle 吧，另外把对应 page 的相关文件都建立出来，包括 js，json，wxml 和 wxcc。
【微信小程序实战教程】之微信小程序核心组件详解
柯晓楠
08-06 2437
组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有视图层的展示，就必定要用到组件化。组件是视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，那么微信小程序提供的基础组件肯定是要完成小程序开发的基础功能与微信风格保持一致的样式。视图容器组件主要用于控制页面的内容，与HTML中的标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在
【微信小程序】WXML-组件
领头羊的博客
07-29 1562
学习微信小程序的组件，参考官方DOC。需要啥组件直接去官方DOC拿code就完事=）
【微信小程序】组件使用及属性参考
2401_85158364的博客
07-05 794
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。``首页效果如图所示。接下来继续演示icon组件。/>### 总结>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。!
微信小程序简单实现进度条Progress
jinaiminm的博客
06-21 457
先看效果：我是看了vant weApp的progress，而且我这边需求不多只需要实现进度条让用户看到就可以，我自己写了一个模拟数据:我认为需求不多，自己使用普通标签就可以实现，在这里zongf是我要显示的长度，为什么要设置小数点呢，因为我给的长度是100%，max-width也是100%，显示的区域最大是100%，长度可以自己设置哈，我是觉得css挺有意思的，本人是小菜鸡，只是想分享自己的感受，如有不足，请大佬多多指教，谢谢
微信小程序实现时间进度条功能
10-15
主要为大家详细介绍了微信小程序实现时间进度条功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序流程进度样式实现 步骤
08-30
微信小程序,实现流程进度样式. 压缩包中包含 图片资源 以及 代码
原生进度条 微信小程序实现
qq_46199553的博客
10-18 713
微信小程序进度条
微信小程序进度条样式_微信小程序—progress(进度条)
weixin_39939904的博客
12-20 5350
设置进度条颜色(请使用十六进制颜色值,例如：#ff00ff)未选择的进度条的颜色(请使用十六进制颜色值,例如：#ff00ff)设置/取消进度条从左往右的动画设置/取消进度条右侧显示百分比//获取应用实例const app = getApp()var isFirst = true;var isSiFirst = true;Page({data: {percent: "20", // 初始进度...
微信小程序进度条样式_微信小程序实现时间进度条功能
weixin_34198817的博客
01-12 1107
关于答题类，或者一些游戏环节的小程序需要用到时间进度条，该功能怎么实现？看下面源码{{progressTime}}秒{{playPausetips}}CSS:.out {margin-left:auto;margin-right:auto;width:250px;height:20px;border:1px solid red;border-radius:20px;overflow:hidden;...
微信小程序—progress(进度条)
热门推荐
Afanbaby的博客
12-12 3万+
官网api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/progress.html 进度条是一种用户体验很好的加载状态，如软件升级下载进度， 视频，图片下载进度，以及上传等， 效果图如下，1.index.js中：//index.js //获取应用实例 const app = getApp() var isFirst = true; var
微信小程序组件—progress(进度条)
qq_39702981的博客
11-29 1万+
progress 进度条。 属性名 类型 默认值 说明 最低版本 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 border-radius Number / String 0 圆角大小，单位px（2.4.0起支......
微信小程序实现加载进度条
苏苏就是小苏苏的博客
02-23 4288
1.实现效果 2.实现原理 2.1第一个线条加载，设置translate3d属性，动态的改变百分比，实现加载。 translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。 translate3d(tx, ty, tz) tx是一个 代表移动向量的横坐标。 ty是一个 代表移动向量的纵坐标。 tz是一个 代表移动向量的z坐标。它不能是 值；那样的移动是没有意义的。 transform: translate3d(-{{10
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

25号底片~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值