uView CountTo 数字滚动

该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。

注意

如果给组件的父元素设置text-align: center想让数字水平居中,可能是由于元素内容快速变化而导致渲染的问题,在APP上组件可能会有轻微的左右抖动现象, 解决办法是给父元素设置padding-left或者margin-left即可。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过startVal设置开始值,endVal设置结束值


copy

#设置滚动相关参数

  • 通过duration设置从开始值到结束值整个滚动过程所需的时间,单位ms
  • 通过useEasing设置滚动快结尾的时候,是否放慢滚动的速度,给用户更好的视觉效果

copy

#是否显示小数位

通过decimals设置显示的小数位,如果设置了,在滚动过程中,小数位会一起变化。如果startValendVal是带小数的,应该设置decimals为 startValendVal一样的小数位数值,如endVal为1200.55,那么decimals应该设置为2。


copy

#千分位分隔符

通过separator配置千分位分隔符,默认为空字符串,可以设置英文逗号",",此参数表现为endVal值超过1000时,比如为"1257",那么滚动后会变成"1,245",在金额数值时, 该参数可能会用上。


copy

#滚动执行的时机

可以通过autoplay设置是否需要初始化时就开始滚动,默认为true,如果设置为false,可以通过组件的ref去控制组件内部的start()paused() 方法来开始或暂停。



你可能感兴趣的:(vue.js,前端,javascript)