简单概述下实现效果,是一个排行榜多个进度条需要一个自增长的动效,通过循环进度条组件定时器实现自增长。
效果如下:
代码如下:
<template>
<div class="line">
<div
class="proportion"
:style="`width: ${percent}%;`"
></div>
</div>
</template>
<script>
export default {
name: 'Progress', //进度条
props: {
//初始值
startValue: {
type: Number,
default: 0,
},
//结束值
endValue: {
type: Number,
default: 100,
},
//动画时间
duration: {
type: Number,
default: 1,
},
},
data() {
return {
percent: 0,
}
},
mounted() {
this.percent = this.startValue >= this.endValue ? this.endValue : this.startValue
this.progress()
},
methods: {
progress(){
const that = this
let progress = this.startValue
const endValue = this.endValue
let time = this.duration * 1000 / (endValue - progress) //根据传入时间计算执行时间
if(progress >= endValue) {
progress = endValue
}
let clearInt = setInterval(function(){
progress++
if(progress >= endValue){
progress = endValue
clearInterval(clearInt);
}
that.percent = progress
},time)
},
},
}
</script>
<style lang="less" scoped>
.line {
width: 100%;
height: 100%;
border-radius: 10px;
background: #f5f5f5;
position: relative;
.proportion {
border-radius: 10px;
background: #00d0a2;
height: 100%;
position: absolute;
}
}
</style>
引入:
<div v-for="item in list" :key="item.key">
<Progress
style="height: 20px;"
:startValue="0"
:endValue="item.max"
:duration="1"
></Progress>
</div>
注意:!!!
在for循环进度条组件时 需要把key设置成随机数,不然重新请求接口时key值是不变的,vue的diff算法是不会更新这个子组件也就不会触发子组件的生命周期,就无法重新执行动效了。