公司网站建设吧个好,软件开发模型的优缺点,教人做窗帘的视频网站,免费咨询医生有问必答目录
#平台差异说明
#基本使用
#设置滚动相关参数
#是否显示小数位
#千分位分隔符
#滚动执行的时机
#API
#Props
#Methods
#Event 该组件一般用于需要滚动数字到某一个值的场景#xff0c;目标要求是一个递增的值。
注意
如果给组件的父元素设置text-align: cente…
目录
#平台差异说明
#基本使用
#设置滚动相关参数
#是否显示小数位
#千分位分隔符
#滚动执行的时机
#API
#Props
#Methods
#Event 该组件一般用于需要滚动数字到某一个值的场景目标要求是一个递增的值。
注意
如果给组件的父元素设置text-align: center想让数字水平居中可能是由于元素内容快速变化而导致渲染的问题在APP上组件可能会有轻微的左右抖动现象 解决办法是给父元素设置padding-left或者margin-left即可。
#平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√
#基本使用
通过start-val设置开始值end-val设置结束值
u-count-to :start-val30 :end-val500/u-count-to#设置滚动相关参数
通过duration设置从开始值到结束值整个滚动过程所需的时间单位ms通过use-easing设置滚动快结尾的时候是否放慢滚动的速度给用户更好的视觉效果
u-count-to :start-val30 :end-val500 :duration2000 :use-easingfalse/u-count-to#是否显示小数位
通过decimals设置显示的小数位如果设置了在滚动过程中小数位会一起变化。如果start-val和end-val是带小数的应该设置decimals为 start-val和end-val一样的小数位数值如end-val为1200.55那么decimals应该设置为2。
u-count-to :start-val30 :end-val500.55 :decimals2/u-count-to#千分位分隔符
通过separator配置千分位分隔符默认为空字符串可以设置英文逗号,此参数表现为end-val值超过1000时比如为1257那么滚动后会变成1,245在金额数值时 该参数可能会用上。
u-count-to :end-val1542 separator,/u-count-to#滚动执行的时机
可以通过autoplay设置是否需要初始化时就开始滚动默认为true如果设置为false可以通过组件的ref去控制组件内部的start()和paused() 方法来开始或暂停。
templateu-count-to refuCountTo :end-valendVal :autoplayautoplay/u-count-to
/templatescriptexport 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#API
#Props
参数说明类型默认值可选值start-val开始值String | Number0-end-val结束值String | Number0-duration滚动过程所需的时间单位msString | Number2000-autoplay是否自动开始滚动Booleantruefalsedecimals要显示的小数位数见上方说明String | Number0-use-easing滚动结束时是否缓动结尾见上方说明Booleantruefalseseparator千位分隔符见上方说明String--color字体颜色String#303133-font-size字体大小单位rpxString | Number50-bold字体是否加粗Booleanfalsetrue
#Methods
此方法如要通过ref手动调用
名称说明startautoplay为false时通过此方法启动滚动reStart暂停后重新开始滚动(从暂停前的值开始滚动)paused暂停滚动
#Event
事件名说明回调参数版本end数值滚动到目标值时触发--
