该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。
注意
如果给组件的父元素设置text-align: center
想让数字水平居中,可能是由于元素内容快速变化而导致渲染的问题,在APP上组件可能会有轻微的左右抖动现象, 解决办法是给父元素设置padding-left
或者margin-left
即可。
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
通过startVal
设置开始值,endVal
设置结束值
<u-count-to :startVal="30" :endVal="500"></u-count-to>
copy
duration
设置从开始值到结束值整个滚动过程所需的时间,单位ms
useEasing
设置滚动快结尾的时候,是否放慢滚动的速度,给用户更好的视觉效果<u-count-to :start-val="30" :end-val="500" :duration="2000" :useEasing="false"></u-count-to>
copy
通过decimals
设置显示的小数位,如果设置了,在滚动过程中,小数位会一起变化。如果startVal
和endVal
是带小数的,应该设置decimals
为?startVal
和endVal
一样的小数位数值,如endVal
为1200.55,那么decimals
应该设置为2。
<u-count-to :startVal="30" :endVal="500.55" :decimals="2"></u-count-to>
copy
通过separator
配置千分位分隔符,默认为空字符串,可以设置英文逗号",",此参数表现为endVal
值超过1000时,比如为"1257",那么滚动后会变成"1,245",在金额数值时, 该参数可能会用上。
<u-count-to :endVal="1542" separator=","></u-count-to>
copy
可以通过autoplay
设置是否需要初始化时就开始滚动,默认为true
,如果设置为false
,可以通过组件的ref
去控制组件内部的start()
和paused()
?方法来开始或暂停。
<template>
<u-count-to ref="uCountTo" :endVal="endVal" :autoplay="autoplay"></u-count-to>
</template>
<script>
export default {
data() {
return {
endVal: 5000.55,
autoplay: false
};
},
methods: {
start() {
this.$refs.uCountTo.start();
},
paused() {
this.$refs.uCountTo.paused();
},
reStart() {
this.$refs.uCountTo.reStart();
},
}
}
</script>