uView CountTo 数字滚动

简介: uView CountTo 数字滚动

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

注意

如果给组件的父元素设置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设置显示的小数位,如果设置了,在滚动过程中,小数位会一起变化。如果startValendVal是带小数的,应该设置decimalsstartValendVal一样的小数位数值,如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>
相关文章
|
7月前
Vue3随内容增加滚动到底部
Vue3随内容增加滚动到底部
223 0
|
2月前
|
JavaScript API
|
4月前
|
JavaScript
Vue3数字输入框(InputNumber)
这是一个可定制的数字输入框组件,支持设置宽度、最小值、最大值、步长、精度等属性,并可添加前缀图标及自定义显示格式。组件兼容键盘快捷键操作,具备禁用功能。示例代码展示了如何使用该组件实现不同场景下的数值输入与格式化展示。组件还利用 `add` 函数解决了 JS 精度问题,并通过 `useSlotsExist` 监听插槽。
323 6
Vue3数字输入框(InputNumber)
|
7月前
|
前端开发 JavaScript 容器
vue3实现文字垂直滚动
vue3实现文字垂直滚动
232 5
|
7月前
|
移动开发 小程序 JavaScript
uView ScrollList 横向滚动列表
uView ScrollList 横向滚动列表
293 0
|
7月前
|
JavaScript
Ant Design Vue设置表格滚动 宽度自适应 不换行
Ant Design Vue设置表格滚动 宽度自适应 不换行
|
JavaScript
vue数字滚动效果组件
vue数字滚动效果组件
146 0
|
JavaScript
vue+elementUI 实现设置还款日字母弹窗组件
vue+elementUI 实现设置还款日字母弹窗组件
44 0
|
JavaScript 前端开发
vue3 根据滚动屏幕显示隐藏
vue3 根据滚动屏幕显示隐藏
346 1
|
JavaScript 数据可视化 数据格式
vue实现歌词滚动
最近看了一篇关于音频可视化的博文,然后偶然联想到歌词滚动这个效果,虽然网上介绍歌词滚动 的文章已经很多了,但是并不是每一个人实现的思路都是一致的,所以在这给大家分享一下我自己的一些想法,和具体是如何实现这个功能的 。
202 0