微信小程序----自定义进度条（节点）

效果图

该进度条可以左右滚动，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,  //当前节点所在位置
	}
})