自定义步骤条"/>
微信小程序自定义步骤条
- steps.wxml 文件
<view class="steps_box">
<block class="block-step" wx:for="{{stepList}}">
<view class="view_item">
<icon wx:if="{{stepNum>=index+1?true:false}}" type="success" color="#3475b9" size="20" />
<view wx:else> {{index+1}} </view><text style="color:{{stepNum>=index+1?'#3475b9':'#b6b6b6'}}">{{item.name}}</text>
</view>
<view wx:if="{{index==stepList.length-1?false:true}}" class="view_line {{stepNum<=index+1?'line_bgcolor1':'line_bgcolor'}} "></view>
</block>
</view>
<view class="yh-btn active-btn" catchtap="numSteps" >下一步</view>
- steps.js文件
data: {
stepList: [{
name: '第一步'
}, {
name: '第二步'
}, {
name: '第三步'
}, {
name: '第四步'
}, ],
stepNum: 1, //当前的步数
},
numSteps() {
this.setData({
stepNum: this.data.stepNum == this.data.stepList.length ? 1 : this.data.stepNum + 1
})
},
- steps.json 文件
（无操作）
- steps.wxss 文件
.yh-btn {
border-radius: 10rpx;
background: #3475b9;
color: #fff;
font-size: 30rpx;
text-align: center;
padding: 15rpx 0;
margin: 20rpx;
letter-spacing: 2rpx;
}
.active-btn:active {
box-shadow: 0px 0px 10px #bbbec4 inset;
}
/* 步骤条 */
.steps_box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}
.block-step {
display: flex;
flex-direction: row;
/* align-items: center;
justify-content: center; */
}
.view_item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.view_item text {
font-size: 28rpx;
margin-top: 20rpx;
/* color: #909090; */
}
.view_item view {
width: 36rpx;
height: 36rpx;
/* background-color: red; */
border: 2rpx solid #b6b6b6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #b6b6b6;
font-size: 24rpx;
content: "\e732";
}
.view_line {
width: 15%;
height: 2rpx;
margin: 0rpx 2% 52rpx 0;
background: linear-gradient(to right, #d3d2d3, #5fe7ff);
}
.line_bgcolor1 {
background-color: #e0e0e0;
}
.line_bgcolor {
background: linear-gradient(to right, #5fe7ff, #3475b9);
}
到这里就完结拉，欢迎留言使用~
效果图:
更多推荐
微信小程序自定义步骤条
发布评论