效果图
该进度条可以左右滚动,scroll-view的width根据节点的数量变化。可以看出进度条的当前节点是离开,已经执行的节点是已提柜和到达,未执行的节点是作业资料回收
wxml
注意:该项目使用的iView库,其中的图标就是使用该UI库的图标
<scroll-view class="content-bar" scroll-x="true">
<view class="bar-view" style="width:{{barWidth}}px">
<progress percent="{{100/(trackNode.length-1)*Steps}}" class="progress"
style="width:{{barWidth-stepWidth}}px" stroke-width="3" color="#4AB3ED" backgroundColor="#E6EEFE" />
<view class="steps_all" style="width:{{barWidth}}px">
<view class="steps_one_box" style="width:{{stepWidth}}px" wx:for="{{trackNode}}" wx:key="cstomerNodeNo">
<view wx:if="{{Steps>index}}" class="steps-success">
<i-icon type="right" color="#fff" />
</view>
<view wx:if="{{Steps==index}}" class="steps_img">
<i-icon type="more" color="#fff" size="28" />
</view>
<view wx:if="{{Steps<index}}" class="steps-no">
<i-icon type="right" color="#fff" />
</view>
<view class="{{Steps>=index?'steps_wenzi':'steps_wenzi2'}}">{{item.stepName}}</view>
</view>
</view>
</view>
</scroll-view>
wxss
.content-bar {
width: 100%;
height: 214rpx;
background-color: #ffffff;
border-radius: 12rpx;
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.04);
}
.bar-view {
padding: 0 5px;
display: flex;
align-items: center;
height: 100%;
}
.progress{
margin: auto;
margin-top:78rpx;
}
.steps_all{
position: absolute;
left: 5px;
top: 50rpx;
display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.steps_one_box{
height: 125rpx;
display:flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.steps_img{
width: 54rpx;
height: 54rpx;
border-radius: 50%;
background: #f9a640;
text-align: center;
line-height: 54rpx;
}
.steps-success{
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background: #4AB3ED;
text-align: center;
line-height: 36rpx;
margin: 9rpx;
}
.steps-no{
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background: #E6EEFE;
text-align: center;
line-height: 36rpx;
margin: 9rpx;
}
.steps_wenzi{
margin-top: 40rpx;
font-size: 25rpx;
}
.steps_wenzi2{
margin-top:30rpx;
font-size: 25rpx;
color: rgb(112, 113, 114);
}
js
page({
data:{
trackNode:[
{stepName:"已提柜"},{stepName:"到达"},{stepName:"离开"},{stepName:"作业资料回收"}
],
barWidth:"", //进度条的长度,等于trackNode的长度*每一个节点的宽度在获取到数据的时候赋值
stepWidth:80, //每一个节点的宽度
Steps:0, //当前节点所在位置
}
})