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

ops/2024/12/14 23:07:54/

参考说明

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

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

横向效果

代码

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


http://www.ppmy.cn/ops/141934.html

相关文章

POE网络变压器和常规网络变压器的区别

POE网络变压器是一种特殊类型的网络变压器&#xff0c;它不仅具备传统网络变压器的功能&#xff0c;如电气隔离、阻抗匹配和信号耦合&#xff0c;还为以太网供电&#xff08;Power Over Ethernet&#xff0c;简称POE&#xff09;提供支持。具体来说&#xff0c;POE网络变压器能…

前端html,vue使用第三方地图详细教程,以百度地图为例,实现地图标注,导航,定位,路线规划,坐标转换

目录 示例&#xff1a; 准备&#xff1a; ?编辑 开始&#xff1a; 1、新建页面&#xff0c;在script标签中引入百度地图的api数据&#xff0c;把自己在控制台创建的应用的ak替换上去 2、创建一个dom对象&#xff0c;设置宽高 3、在js中初始化地图 进阶&#xff1a; 1…

ARMS,让企业应用性能问题无处藏身

在科技驱动的时代&#xff0c;企业对应用程序的依赖越来越深&#xff0c;但复杂的系统架构和高并发的使用场景也让应用的性能维护成为巨大的挑战。当用户体验成为企业竞争的核心&#xff0c;如何快速发现问题、优化性能&#xff0c;成为每一个技术团队必须解决的难题。应用实时…

HCIE实验OBS区

1、OBS区分为OBS-LVS和OBS-Node。 OBS-LVS主要是管理和业务。

嵌入式Linux 设备树 GPIO详解 示例分析 三星 NXP RK

GPIO设备树用于在Linux内核中定义与GPIO相关的硬件资源&#xff0c;它使操作系统可以识别、配置和使用GPIO引脚。设备树中通常会指定GPIO控制器的基地址、GPIO引脚的中断配置、时钟和其他相关信息。 目录 RK相关案例代码 NXP相关案例代码 三星相关案例代码 在设备树中&…

【docker】12. Docker Volume(存储卷)

什么是存储卷? 存储卷就是将宿主机的本地文件系统中存在的某个目录直接与容器内部的文件系统上的某一目录建立绑定关系。这就意味着&#xff0c;当我们在容器中的这个目录下写入数据时&#xff0c;容器会将其内容直接写入到宿主机上与此容器建立了绑定关系的目录。 在宿主机上…

初识Linux · 网络基础

目录 前言&#xff1a; 初识协议 再识协议 局域网 跨网络传输 前言&#xff1a; 本文作为Linux网络学习的第一篇文章&#xff0c;相对来说概念还是偏多的&#xff0c;甚至于概念让人觉得晦涩&#xff0c;这是非常正常的&#xff0c;那么进入网络部分之前&#xff0c;我们…

2024年12月CCF-GESP编程能力等级认证C++编程三级真题解析

本文收录于专栏《C++等级认证CCF-GESP真题解析》,专栏总目录:点这里。订阅后可阅读专栏内所有文章。 一、单选题(每题 2 分,共 30 分) 第 1 题 下列二进制表示的十进制数值分别是( ) [10000011]原=( ) [10000011]补=&#x