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

参考阐明

微信小程序实现流程进度功能 - 知乎
上面的为一个节点进度条的例子，但并不完整，根据上述代码，进行修改完满，实现其效果
横向效果

代码

wxml

1. <view class='order_process'>
2.   <view class='process_wrap' wx:for="{{processData}}" wx:key="index">
3.     <view class='process'>
4.       <view class='process_line' style="background:{{item.start}}"></view>
5.       <image class="process_icon {{item.icon === icon2 ? 'rotate-icon' : ''}}" src="{{item.icon}}"></image>
6.       <view class='process_line' style="background:{{item.end}}"></view>
7.     </view>
8.     <text class='process_name'>{{item.name}}</text>
9.   </view>
10. </view>

复制代码

wxss

1. .order_process {
2.   display: flex;
3.   flex-wrap: nowrap;
4.   padding: 10rpx 10rpx 20rpx 10rpx;
5.   background-color: #fff;
6. }
7. .process_wrap {
8.   display: flex;
9.   flex-direction: column;
10.   flex: 1;
11.   align-items: center;
12. }
13. .process {
14.   display: flex;
15.   align-items: center;
16.   width: 100%;
17. }
18. .process_icon {
19.   width: 35rpx;
20.   height: 35rpx;
21. }
22. .process_line {
23.   background: #eff3f6;
24.   flex: 1;
25.   height: 5rpx;
26. }
27. .process_name {
28.   font-size: 24rpx;
29. }
30. /* 定义旋转动画 */
31. @keyframes rotate360 {
32.   from {
33.     transform: rotate(0deg);
34.   }
35.   to {
36.     transform: rotate(360deg);
37.   }
38. }
39. /* 应用到 .rotate-icon 类 */
40. .rotate-icon {
41.   animation: rotate360 5s linear infinite; /* 5秒完成一次旋转，线性时间函数，无限循环 */
42. }

复制代码

js

1. Page({
2.   data: {
3.     icon1: '../img/process_1.png',
4.     icon2: '../img/process_2.png',
5.     icon3: '../img/process_3.png',
6.     processData: [],//节点信息
7.   },
8.   onLoad: function () {
9.     // 初始化数据 processData
10.     const data = [{
11.         name: '节点1',
12.         start: '#fff',
13.         end: '#f9d9dd',
14.         icon: this.data.icon1,
15.         state: 0
16.       },
17.       {
18.         name: '节点2',
19.         start: '#f9d9dd',
20.         end: '#f9d9dd',
21.         icon: this.data.icon1,
22.         state: 0
23.       },
24.       {
25.         name: '节点3',
26.         start: '#f9d9dd',
27.         end: '#f9d9dd',
28.         icon: this.data.icon1,
29.         state: 1
30.       },
31.       {
32.         name: '节点4',
33.         start: '#f9d9dd',
34.         end: '#f9d9dd',
35.         icon: this.data.icon1,
36.         state: 0
37.       },
38.       {
39.         name: '节点5',
40.         start: '#f9d9dd',
41.         end: '#fff',
42.         icon: this.data.icon1,
43.         state: 0
44.       }
45.     ]
46.     this.setData({
47.       processData: data
48.     })
49.     // 处理节点信息
50.     this.setProcessIcon();
51.   },
52.   setProcessIcon: function () {
53.     const processArr = this.data.processData;
54.     let index = -1; // 记录状态为1的最后的位置
55.   
56.     // 首先找到状态为1的节点位置
57.     processArr.forEach((item, i) => {
58.       if (item.state === 1) {
59.         index = i;
60.         return false; // 找到后停止循环
61.       }
62.     });
63.   
64.     // 然后根据找到的位置设置图标和其他属性
65.     processArr.forEach((item, i) => {
66.       if (i === index) { // 当前正在处理的节点
67.         item.icon = this.data.icon2;
68.         item.start = "#f0a0a9";
69.         item.end = "#f9d9dd";
70.       } else if (i < index && index !== -1) { // 已完成的节点
71.         item.icon = this.data.icon3;
72.         item.start = "#f0a0a9";
73.         item.end = "#f0a0a9";
74.       } else { // 未完成的节点
75.         item.icon = this.data.icon1;
76.         item.start = "#f9d9dd";
77.         item.end = "#f9d9dd";
78.       }
79.     });
80.   
81.     // 特殊处理第一个和最后一个节点
82.     if (processArr.length > 0) {
83.       processArr[0].start = "#fff";
84.       processArr[processArr.length - 1].end = "#fff";
85.     }
86.   
87.     this.setData({
88.       processData: processArr
89.     });
90.   }
91. });

复制代码

纵向效果

代码

wxml

1. <view class='order_process1'>
2.   <view class='process_item1' wx:for="{{processData}}" wx:key="index">
3.     <view class='process_vertical1'>
4.       <view class='process_line_vertical1' style="background:{{item.start}};"></view>
5.       <image class="process_icon1 {{item.icon === icon2 ? 'rotate-icon1' : ''}}" src="{{item.icon}}"></image>
6.       <view class='process_line_vertical1' style="background:{{item.end}};"></view>
7.     </view>
8.     <text class='process_name1'>{{item.name}}</text>
9.   </view>
10. </view>

复制代码

wxss

1. .order_process1 {
2.   display: flex;
3.   flex-direction: column; /* 改为垂直排列 */
4.   padding: 10rpx;
5.   background-color: #fff;
6. }
8. .process_item1 {
9.   display: flex;
10.   flex-direction: row; /* 每个步骤项水平排列 */
11.   align-items: center; /* 垂直居中对齐 */
12. }
14. .process_vertical1 {
15.   display: flex;
16.   flex-direction: column; /* 步骤线垂直排列 */
17.   align-items: center; /* 图标居中 */
18. }
20. .process_icon1 {
21.   width: 35rpx;
22.   height: 35rpx;
23. }
25. .process_line_vertical1 {
26.   background: #eff3f6;
27.   width: 5rpx; /* 宽度变为5rpx */
28.   height: 40rpx; /* 高度根据需要设置 */
29. }
31. .process_name1 {
32.   font-size: 24rpx;
33.   margin-left: 20rpx; /* 文字与图标之间的间距 */
34. }
36. /* 定义旋转动画 */
37. @keyframes rotate360 {
38.   from {
39.     transform: rotate(0deg);
40.   }
41.   to {
42.     transform: rotate(360deg);
43.   }
44. }
46. /* 应用到 .rotate-icon1 类 */
47. .rotate-icon1 {
48.   animation: rotate360 5s linear infinite; /* 5秒完成一次旋转，线性时间函数，无限循环 */
49. }

复制代码

js

参见横向js代码
图片展示 

process_1.png

process_2.png

process_3.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。