原生微信小程序步骤条横向 step

想个名字想老半天

已于 2023-05-18 15:37:10 修改

阅读量872

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

于 2023-05-18 15:34:08 首次发布

本文链接：https://blog.csdn.net/MistShown/article/details/130748238

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生微信小程序步骤条横向 step

只有4个步骤的！没有多个
只有4个步骤的！没有多个
只有4个步骤的！没有多个

效果图如下=>

在这里插入图片描述
直接上代码吧

//在components文件夹中新建 steps 文件夹 wxml中
<view class="stepWrap">
    <view class="stepTit">{{stepList[stepIndex-1].step}}</view>
    <view class="flexCenter">
        <view class="flexCenter" wx:for="{{stepList}}" wx:key="step">
            <view class="number {{stepIndex-1>=index?'numActive':''}}">{{index+1}}</view>
            <view wx:if="{{index<stepList.length-1}}" class="line {{stepIndex-1 > index?'activeLine':''}}"></view>
        </view>
    </view>
    <view class="flexSpace">
        <view class="" wx:for="{{stepList}}" wx:key="step">
            <view class="stepMain">
                <view class="stepStit {{stepIndex-1>=index?'stitActive':''}}">{{item.step}}</view>
                <view class="timeBox">{{item.time}}</view>
            </view>
        </view>
    </view>
</view>

//js
Component({
  properties: {
    stepList: {
      type: Array,
      value: [
        {
          step:"买家下单",
          time:'2023-05-19 20:20:20'
        },
        {
          step:"买家下单",
          time:'2023-05-19 20:20:20'
        },
        {
          step:"买家下单",
          time:'2023-05-19 20:20:20'
        },
        {
          step:"买家下单",
          time:'2023-05-19 20:20:20'
        }
      ],
    },
    stepIndex: {
      type: Number,
      value: 3,
    },
  },
});

/* wxss 忽略字体*/

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexSpace {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stepWrap {
  background-color: #fff;
  padding: 36rpx 24rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}
.stepTit {
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  margin-bottom: 20rpx;
}
.stepMain {
  width: 120rpx;
  text-align: center;
}
.number {
  width: 48rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  border-radius: 50%;
  border: 1rpx solid #ECECEC;
  margin: 0 auto;
}
.numActive {
  color: #fff;
  background: #0B78F2;
}
.stepStit {
  width: 120rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #787878;
  margin-top: 16rpx;
}
.stitActive {
  color: #0B78F2;
}
.timeBox {
  height: 48rpx;
  line-height: 24rpx;
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #787878;
}
.line {
  width: 125rpx;
  height: 2rpx;
  background: #ECECEC;
}
.activeLine {
  background: #0B78F2;
}

//页面中引用
//wx.json
{
    "usingComponents":{
        "step":"../components/steps"//组件位置
    }
}
//wxml
<view>
	//步骤条  stepList 格式见上 stepIndex 当前进行到哪一项
	<step stepList="{{stepList}}" stepIndex="{{stepIndex}}"/>
</view>