微信小程序:实现节点进度条的效果；正在完成的节点有动态循环效果；横向，
参考阐明微信小程序实现流程进度功能 - 知乎
上面的为一个节点进度条的例子，但并不完整，根据上述代码，进行修改完满，实现其效果
横向效果
https://i-blog.csdnimg.cn/direct/49d7b9f3ec27445aa43ae786fb8511a9.png
代码
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.start = "#fff";
processArr.end = "#fff";
}
this.setData({
processData: processArr
});
}
}); 纵向效果
https://i-blog.csdnimg.cn/direct/09394c7b75f44545a8dcc3bea502da18.png
代码
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
https://i-blog.csdnimg.cn/direct/f58ee231e5d14de69708caaf7680a7b8.png
process_2.png
https://i-blog.csdnimg.cn/direct/f2a4ef620a0342dd92460cb5b8b90c05.png
process_3.png
https://i-blog.csdnimg.cn/direct/8eb39ba166cb4db584cb8b1ef020e1f0.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]