小程序竖版步骤条（附源码）

index.wxml

<!--index.wxml-->
    <view class="stepBox">
      <view class="box">
        <view class="{{item.state === 1 ? 'greenSigleStep' : 'sigleStep'}}" wx:for="{{steps}}" wx:for-item="item" wx:key="text" data-item="{{item}}" bindtap="onCard">
          <view class="view_item">
            <!-- 未完成状态 -->
            <view class="gray" wx:if="{{item.state === 0}}"></view>
            <!-- 完成状态 -->
            <icon class="icon" wx:if="{{item.state === 1}}" type="success" size="14" />
            <!-- 普通警告 -->
            <icon class="icon" wx:if="{{item.state === 2}}" type="warn" size="14" color="#e0dd15"/>
            <!-- 严重警告 -->
            <icon class="icon" wx:if="{{item.state === 3}}" type="warn" size="14" />
          </view>
          <!-- state 如果为 1 则为正常完成状态 否则 是未完成状态 -->
          <!-- color 如果不为 2 则显示正常完成和未完成的卡片 -->
          <view class="stepConBox" wx:if="{{item.color != 2}}" style="color: {{item.state === 1 ? '#00cf3e' : '#969799'}}">
            <view>步骤{{item.title}}</view>
            <view class="timebox">{{ item.content }}</view>
          </view>
          <!-- state 如果为 2 则为普通警告状态 否则 是严重警告状态 -->
          <!-- color 如果为 2 则显示普通警告和严重警告的卡片 -->
          <view class="stepConBox" wx:if="{{item.color === 2}}" style="color: {{item.state === 2? '#e0dd15' : 'red'}};">
            <view>步骤{{index + 1}}</view>
            <view class="timebox">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
<view class='Page'>
  <view class="siteWrapper">
</view>

index.css

.Page {
  margin: 32rpx;
}
.siteWrapper{
  margin-top: 50px;
}
.stepBox {
  border-radius: 20px;
  padding: 8rpx 32rpx 32rpx 16rpx;
  background-color: #fff;
}

.box {
  box-sizing: border-box;
  width: 100%;
  padding-left: 20rpx;
}

.stepsList {
  box-sizing: border-box;
  width: 100%;
}

.sigleStep {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 28rpx;
  border-left: 4rpx solid #c2c3c4;
  position: relative;
}

.sigleStep:active{
  background-color: #f1f1f1;
}

.greenSigleStep {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 28rpx;
  border-left: 4rpx solid #00cf3e;
  position: relative;
}

.greenSigleStep:active{
  background-color: #f1f1f1;
}

.topShelter {
  width: 20rpx;
  height: 46rpx;
  background-color: #ffffff;
  position: absolute;
  left: -10rpx;
  top: 0;
  z-index: 1;
}

.bottomShelter {
  width: 20rpx;
  height: 122rpx;
  background-color: #ffffff;
  position: absolute;
  left: -10rpx;
  bottom: 0;
  z-index: 1;
}

.gray {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #969799;
  position: absolute;
  top: -10rpx;
  left: -13rpx;
}


.stepConBox {
  box-sizing: border-box;
  padding: 20rpx 20rpx 20rpx 0;
  color: #969799;
  font-size: 14px;
  line-height: 36rpx;
  border-bottom: 1px solid #EAEAEA;
}
.icon{
  background-color: #fff;
  position: absolute;
  top: -15rpx;
  left: -18rpx;
  z-index: 2;
}
.timebox {
  margin-top: 8rpx;
  font-size: 12px;
}
.result{
  font-size: 24rpx;
}

index.js

Page({
  data: {
    steps: [
      {
        title: '1',
        content: "步骤1",
        state: 1,// 正常状态
        color:1, // 正常状态下文字颜色判断条件
      },
      {
        title: '2',
        content: "步骤2",
        state: 2, // 普通警告状态
        color:2, // 普通警告文字颜色
      },
      {
        title: '3',
        content: "步骤3",
        state: 3, // 严重警告状态
        color:2 // 严重警告文字颜色
      },
      {
        title: '4',
        content: "步骤4",
        state: 1,
      },
      {
        title: '5',
        content: "步骤5",
        state: 1,// 没开始状态
      },
      {
        title: '6',
        content: "步骤6",
        state: 1,
      },
      {
        title: '7',
        content: "步骤7",
        state: 0,
      }
  ],
  },
  onCard(e){
    console.log(e);
    console.log(e.currentTarget.dataset);
    const content = e.currentTarget.dataset.item.content
    console.log(content);
    wx.navigateTo({
      url: '../demoInfo/demoInfo?parameter=' + content,
    })
  },
})