效果图在这里,蓝色进度条有动画效果哦
WXML
<view class="progress">
<!-- 背景条 -->
<view class="plainBar">
<!-- 进度条 -->
<view class="bar" style="width:{{x}}%"></view>
</view>
<!-- 进度球 -->
<view class="stage-container">
<view class="stage" wx:for="{{statusList}}" wx:key="index">
<view class="ball {{index<progress?'done':index==progress?'current':'undone'}}">
<text>{{index}}</text>
</view>
<text class="title" style="color: {{index==progress?'var(--color-normal)':''}};">{{item}}</text>
</view>
</view>
</view>
TS
Component({
properties: {
statusList: Object,
/** current stage */
progress: '' as any,
},
data: {
/** num of stages */
n: 0 as number,
/** lenth of bar */
x: 0 as number,
/** progress on watch */
progress: 0 as number
},
pageLifetimes: {
},
//监听订单状态变化
observers: {
'progress': function () {
this.calc(this.properties.statusList)
}
},
methods: {
/** calculation */
calc(e: Object) {
let n = Object.keys(e).length
let x = (100 / (n + 1)) * this.properties.progress
this.setData({
n: n,
x: this.properties.progress == n ? 100 : x
})
}
}
})
SCSS
.progress {
width: 100%;
display: felx;
// padding: 40px 0;
height: 80px;
position: relative;
flex-direction: column;
box-sizing: border-box;
.plainBar {
top: 37px;
width: 100%;
height: 5px;
position: absolute;
border-radius: 20px;
flex-direction: column;
background-color: var(--color-border-light);
.bar {
top: 0;
left: 0;
height: 100%;
border-radius: 20px;
position: absolute;
background-color: var(--color-confirm);
transition: width 1s ease-in-out
}
}
.stage-container {
top: 30px;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: space-evenly;
.stage {
display: flex;
align-items: center;
flex-direction: column;
.ball {
width: 20px;
height: 20px;
display: flex;
font-size: 12px;
border-radius: 50%;
align-items: center;
justify-content: center;
color: var(--color-white);
}
.done {
background-color: var(--color-confirm);
}
.current {
background-color: var(--color-confirm);
animation: shadow 3s infinite ease-in-out;
}
@keyframes shadow {
50% {
box-shadow: rgba(64, 158, 255, .3) 0 0 3px 4px;
}
}
.undone {
background-color: var(--color-border-light);
}
.title {
margin-top: 5px;
color: var(--color-light);
font-size: 12px;
}
}
}
}
JSON
{
"component": true,
"usingComponents": {}
}
使用
<progression statusList="{{状态列表}}" progress="{{状态key}}"></progression>
状态列表数据格式如下: