会议网站定制_陕西省人民政府网招考招录_如何查询域名注册人信息_网站推广软件免费观看

参考说明

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

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

横向效果

代码

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'