东莞销售网站设计,宾果 wordpress,wordpress主题添加中文版,网站制作方案相信乐云seo参考说明
微信小程序实现流程进度功能 - 知乎
上面的为一个节点进度条的例子#xff0c;但并不完整#xff0c;根据上述代码#xff0c;进行修改完善#xff0c;实现其效果
横向效果 代码
wxml
view classorder_processview classprocess_wrap wx:for但并不完整根据上述代码进行修改完善实现其效果
横向效果 代码
wxml
view classorder_processview classprocess_wrap wx:for{{processData}} wx:keyindexview classprocessview classprocess_line stylebackground:{{item.start}}/viewimage classprocess_icon {{item.icon icon2 ? rotate-icon : }} src{{item.icon}}/imageview classprocess_line stylebackground:{{item.end}}/view/viewtext classprocess_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 classorder_process1view classprocess_item1 wx:for{{processData}} wx:keyindexview classprocess_vertical1view classprocess_line_vertical1 stylebackground:{{item.start}};/viewimage classprocess_icon1 {{item.icon icon2 ? rotate-icon1 : }} src{{item.icon}}/imageview classprocess_line_vertical1 stylebackground:{{item.end}};/view/viewtext classprocess_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});}
});
数据部分优化
其实可以只保留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 1if (item.state 1) {lastIndex i;}});// 判断是否所有节点都已完成或未开始allCompleted和allNotStarted的数值是bool类型如果后面判断成立为true反之为false// 判断是否全部完成判断最后一个节点的索引是否是节点信息长度-1。判断最后一个为状态为1的节点是否是最后一个节点// 例如有三条数据我的索引是012如果我索引是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。// 反之(其余节点)设置图标为未完成图标icon1item.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) { //设置全部节点的图标为已完成图标icon3item.icon this.data.icon3;//如果是第一个节点,那么它的开始线段隐藏(白色);如果是其余节点,开始线段设置为深粉色item.start i 0 ? #fff : #f0a0a9;//如果是最后一个节点,那么它的结束线段隐藏(白色);如果是其余节点,结束线段设置为深粉色item.end i processArr.length - 1 ? #fff : #f0a0a9;}// 中间节点-正常情况else { // 已完成的节点// 如果当前索引小于等于最后一个state为1的节点表示已完成(这里的例子lastIndex1也就是这里前两条01满足)if (i lastIndex) { //设置已完成的节点图标为icon3item.icon this.data.icon3;//设置第一个节点的开始线段隐藏(白色)反之已完成的节点的开始线段为深粉色item.start i 0 ? #fff : #f0a0a9;//设置最后一个节点的结束线段隐藏(白色)反之已完成的节点的结束线段为深粉色item.end i lastIndex ? #f0a0a9 : #f0a0a9;} // 下一个即将开始的节点// 这里设置正在执行的节点(节点未完成但正在执行介于未完成和已完成之间)// 该节点位于state1的数据的下一条数据也就是最后一个于state1的索引1else if (i lastIndex 1) {//设置这个正在进行的节点的图标为icon2item.icon this.data.icon2;//设置这个节点的开始线段为深粉色(已完成线段颜色)item.start #f0a0a9;//设置这个节点的结束线段为浅粉色(未完成线段颜色)item.end #f9d9dd;} // 未完成的节点else { //设置节点图标为iconitem.icon this.data.icon1;//设置全部未完成节点的开始线段为浅粉色item.start #f9d9dd;//如果是最后一个节点就隐藏它的结束线段(白色)如果不是最后一个节点就设置结束线段颜色为浅粉色item.end i processArr.length - 1 ? #fff : #f9d9dd;}}});//替换新的节点数据this.setData({processData: processArr});}
});
