WXML代码：
<view class="container">
<view class="into_progress">
<view class="prog_item {{item.active ? 'active' : ''}}" wx:for="{{progArr}}" wx:key="index" data-id="{{item.id}}" bindtap="handleProgChange">
<view class="item_num">
<view class="num_val">
<text>{{item.num}}</text>
</view>
<view class="num_text">{{item.text}}</view>
</view>
<view class="item_line {{item.active && thisProg > index ? 'white' : ''}}" wx:if="{{index < 5}}"></view>
</view>
</view>
<!-- 1 -->
<block wx:if="{{thisProg == 0}}">
<form bindsubmit="stepExecution">
<view class="into_box">第一步</view>
<view class="opeat_btn">
<button class="btn_gradient_bg submit_btn" form-type="submit">下一步</button>
</view>
</form>
</block>
<!-- 2 -->
<block wx:if="{{thisProg == 1}}">
<form bindsubmit="stepExecution">
<view class="into_box">第二步</view>
<view class="award_btn">
<button class="save blue text-center" data-id="0" form-type="submit">上一步</button>
<button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
</view>
</form>
</block>
<!-- 3 -->
<block wx:if="{{thisProg == 2}}">
<form bindsubmit="stepExecution">
<view class="into_box">第三步</view>
<view class="award_btn">
<button class="save blue text-center" data-id="1" form-type="submit">上一步</button>
<button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
</view>
</form>
</block>
<!-- 4 -->
<block wx:if="{{thisProg == 3}}">
<form bindsubmit="stepExecution">
<view class="into_box">第四步</view>
<view class="award_btn">
<button class="save blue text-center" data-id="2" form-type="submit">上一步</button>
<button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
</view>
</form>
</block>
<!-- 5 -->
<block wx:if="{{thisProg == 4}}">
<form bindsubmit="stepExecution">
<view class="into_box">第五步</view>
<view class="award_btn">
<button class="save blue text-center" data-id="3" form-type="submit">上一步</button>
<button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
</view>
</form>
</block>
<!-- 6 -->
<block wx:if="{{thisProg == 5}}">
<form bindsubmit="stepExecution">
<view class="into_box">第六步</view>
<view class="award_btn">
<button class="save blue text-center" data-id="4" form-type="submit">上一步</button>
<button class="btn_gradient_bg end text-center" form-type="submit">完成</button>
</view>
</form>
</block>
</view>WXSS代码：
.container{background-color: #F6F6F6;min-height: 100vh;}
.into_progress{height: 150rpx;background: linear-gradient(180deg, #2EAFFB 0%, #0B94FF 100%);padding: 0 30rpx;display: flex;align-items: center;justify-content: center;}
.prog_item{flex: 0 0 16.66%;display: flex;}
.prog_item:last-child{flex: 0;}
.prog_item .item_num{text-align: center;}
.prog_item .item_num .num_val{height: 48rpx;width: 48rpx;background: #1D77C4;border: 1rpx solid #7BCCFF;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.prog_item .item_num .num_val text{font-size: 28rpx;color: #D5E6FF;}
.prog_item .item_num .num_text{font-size: 24rpx;color: #fff;margin-top: 12rpx;}
.prog_item .item_line{width: 100%;height: 4rpx;background: rgba(24, 88, 161, .4);margin: 25rpx 0 0 0;}
.prog_item .item_line.white{background: #fff;}
.prog_item.active .item_num .num_val{background: #fff;border: 1rpx solid #fff;}
.prog_item.active .item_num .num_val text{display: inline-block;border: 1rpx solid #2EAFFB;color: #2EAFFB;width: 40rpx;height: 40rpx;display: inline-block;border-radius: 50%;}
.into_box{background-color: #fff;padding: 60rpx 30rpx;font-size: 30rpx;text-align: center;}
.opeat_btn{margin: 30rpx;}
.opeat_btn .submit_btn{border-radius: 48rpx;line-height: 90rpx;font-size: 32rpx;color: #fff;border: 1px solid #0590FF;}
.award_btn{padding: 30rpx;display: flex;}
.award_btn button{line-height: 90rpx;flex: 1;border-radius: 48rpx;font-size: 32rpx;margin: 0 10rpx;}
.award_btn .save{background: #F8F8F8;border: 1px solid #0590FF;}
.award_btn .end{color: #fff;}JS代码：
Page({
/**
* 页面的初始数据
*/
data: {
progArr: [
{id: 0, num: 1, text: '第一', active: true},
{id: 1, num: 2, text: '第二', active: false},
{id: 2, num: 3, text: '第三', active: false},
{id: 3, num: 4, text: '第四', active: false},
{id: 4, num: 5, text: '第五', active: false},
{id: 5, num: 6, text: '第六', active: false}
],
thisProg: 0
},
/**
* 生命周期函数--监听页面加载
* @param {*} options
*/
onLoad(options) {
// 定位第四步，传入3即可，第一步默认从0开始
// this.progressChange(3);
},
/**
* 头部进度改变
* @param {*} e
*/
handleProgChange(e){
let thisId = e.currentTarget.dataset.id;
this.progressChange(thisId);
},
/**
* 上下步
* @param {*} thisId
*/
progressChange(thisId){
let that = this;
let { progArr } = that.data;
progArr.forEach((item, index) => {
index <= thisId ? item.active = true : item.active = false;
});
this.setData({progArr, thisProg: thisId});
},
/**
* 当前步骤id
*/
thisSetpId(){
let { progArr } = this.data;
let steps = 0;
progArr.find((item) => {
if(item.active){
steps = item.id;
}
});
return steps;
},
/**
* 步骤
* @param {*} e
*/
stepExecution(e){
let that = this;
let steps = that.thisSetpId();
let thisIds = e.detail.target.dataset.id;
if(steps == 0){
that.progressChange(1);
}else if(steps == 1){
if(thisIds == 0){
that.progressChange(thisIds);
}else{
that.progressChange(2);
}
}else if(steps == 2){
if(thisIds == 1){
that.progressChange(thisIds);
}else{
that.progressChange(3);
}
}else if(steps == 3){
if(thisIds == 2){
that.progressChange(thisIds);
}else{
that.progressChange(4);
}
}else if(steps == 4){
if(thisIds == 3){
that.progressChange(thisIds);
}else{
that.progressChange(5);
}
}else if(steps == 5){
if(thisIds == 4){
that.progressChange(thisIds);
}else{
wx.showToast({
title: '完成',
icon: 'success'
})
}
}
}
})JSON代码：
{
"navigationBarBackgroundColor": "#2EAFFB",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "步骤进度"
}