技術標籤：javascript

效果圖

該進度條可以左右滾動，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,  //當前節點所在位置
	}
})