【uniapp】自定义步骤条样式实现

效果图

实现

html 复制代码

<!-- 步骤条 -->
<view class="progress-wrap">
  <view class="progress-box">
    <view :class="active > 0 ? 'active-number' : 'normal-number'">1</view>
    <view :class="['normal-desc', active > 0 ? 'active-desc' : '']">学生认证</view>
  </view>
  <view class="progress-box">
    <view :class="active > 1 ? 'active-number' : 'normal-number'">2</view>
    <view :class="['normal-desc', active > 1 ? 'active-desc' : '']">信息核实</view>
  </view>
  <view class="progress-box">
    <view :class="active > 2 ? 'active-number' : 'normal-number'">3</view>
    <view :class="['normal-desc', active > 2 ? 'active-desc' : '']">发放权益</view>
  </view>
  <view :class="['progress-line', active < 3 ? 'bg1' : 'bg2']">
    <block v-if="active < 3">
      <view :class="['dot', 'left1', active > 1 ? 'w4' : 'w1']"></view>
      <view :class="['dot', 'w2', active > 1 ? 'left4' : 'left2']"></view>
      <view :class="['dot', 'w3', active > 1 ? 'left5' : 'left3']"></view>
    </block>
  </view>
</view>

js 复制代码

data() {
  return {
    active: 1, // 步骤条， 1-学生认证 2-信息核实 3-发放权益
  }
}

css 复制代码

.progress-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
  padding: 0 60rpx;
  position: relative;
  
  .progress-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96rpx;

    .normal-number {
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      background: #f1f2f8;
      color: #aaacae;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      // font-family: PingFangSCMedium-Medium;
      margin-bottom: 18rpx;
      margin-top: 6rpx;
      position: relative;
      z-index: 5;
    }
    .normal-desc {
      font-size: 24rpx;
      line-height: 40rpx;
      color: #aaacae;
    }
    
    .active-number {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: #fe7777;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      // font-family: PingFangSCMedium-Medium;
      margin-bottom: 12rpx;
      margin-top: 0;
      position: relative;
      z-index: 5;
    }
    .active-desc {
      color: #2d2f37;
    }
  }
  
  .progress-line {
    position: absolute;
    left: 108rpx;
    right: 108rpx;
    top: 16rpx;
    width: 534rpx;
    height: 8rpx;
    border-radius: 4rpx;
    z-index: 2;
  }
  .bg1 {
    background: #f1f2f8;
  }
  .bg2 {
    background: #fe7777;
  }
  .dot {
    position: absolute;
    top: 0;
    height: 8rpx;
    border-radius: 4rpx;
    background: #fe7777;
    z-index: 3;
  }
  .w1 {
    width: 110rpx;
  }
  .w2 {
    width: 16rpx;
  }
  .w3 {
    width: 12rpx;
  }
  .w4 {
    width: 378rpx;
  }
  .left1 {
    left: 0;
  }
  .left2 {
    left: 126rpx;
  }
  .left3 {
    left: 158rpx;
  }
  .left4 {
    left: 394rpx;
  }
  .left5 {
    left: 426rpx;
  }
}

欢迎大家提供更好的方法~