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

参考说明

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

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

横向效果

代码

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 () {// 初始化数据 processDataconst 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, 将当前节点及之前的所有节点状态设置为1const 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});}
});