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

参考说明

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

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

横向效果

代码

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[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