更新记录
1.0.0(2020-02-09) 下载此版本
数字增长和减少跑起来动画
平台兼容性
## numberAnimation 数字增长减少跑起来动画 ## 使用方式 在Vue中引用
import numberAnimation from'../../components/canlang-numberAnimation/canlang-numberAnimation.vue'
在template中使用
<numberAnimation ref="number" :originNumber="oNumber" :stopNumber="aNumber" :time="times" :quantity="quantiys" :color="color" :size="size"></numberAnimation>
在script中使用
export default {
data() {
return {
oNumber:0,
aNumber:0,
times:1000,
quantiys:2,
color:"",
size:30
}
},
methods: {
cheshi(){
this.oNumber=0;
this.aNumber=129.99;
this.color="#EACD76";
this.size=60;
this.$nextTick(function(){
this.$refs.number.show();
})
},
},
components:{
numberAnimation
}
}
属性说明 | 属性名称 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
originNumber | Number | 0 | 起始数值 | |
stopNumber | Number | 0 | 结束数值 | |
time | Number | 1000 | 动画滚动时长(毫秒) | |
quantity | Number | 0 | 数字滚动动画包括的小数点位数,最多2位 | |
color | String | #000000 | 数字颜色 | |
size | Number | 60 | 数字大小(单位:rpx) |
方法说明 通过ref获取组件调用方法 | 方法名 | 说明 |
---|---|---|
show | 开启数字滚动动画 |