uniapp中uview组件库丰富的CountTo 数字滚动使用方法

简介: uniapp中uview组件库丰富的CountTo 数字滚动使用方法

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

注意

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

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

通过start-val设置开始值,end-val设置结束值

<u-count-to :start-val="30" :end-val="500"></u-count-to>

#设置滚动相关参数

  • 通过duration设置从开始值到结束值整个滚动过程所需的时间,单位ms
  • 通过use-easing设置滚动快结尾的时候,是否放慢滚动的速度,给用户更好的视觉效果
<u-count-to :start-val="30" :end-val="500" :duration="2000" :use-easing="false"></u-count-to>

#是否显示小数位

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

<u-count-to :start-val="30" :end-val="500.55" :decimals="2"></u-count-to>

#千分位分隔符

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

<u-count-to :end-val="1542" separator=","></u-count-to>

#滚动执行的时机

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

<template>
  <u-count-to ref="uCountTo" :end-val="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>

#API

#Props

参数 说明 类型 默认值 可选值
start-val 开始值 String | Number 0 -
end-val 结束值 String | Number 0 -
duration 滚动过程所需的时间,单位ms String | Number 2000 -
autoplay 是否自动开始滚动 Boolean true false
decimals 要显示的小数位数,见上方说明 String | Number 0 -
use-easing 滚动结束时,是否缓动结尾,见上方说明 Boolean true false
separator 千位分隔符,见上方说明 String - -
color 字体颜色 String #303133 -
font-size 字体大小,单位rpx String | Number 50 -
bold 字体是否加粗 Boolean false true

#Methods

此方法如要通过ref手动调用

名称 说明
start autoplayfalse时,通过此方法启动滚动
reStart 暂停后重新开始滚动(从暂停前的值开始滚动)
paused 暂停滚动

#Event

事件名 说明 回调参数 版本
end 数值滚动到目标值时触发 - -


相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
52 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
82 5
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
71 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
63 1
|
19天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
35 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
126 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
61 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
81 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
110 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
109 7

热门文章

最新文章