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>
相关文章
|
移动开发 JavaScript 小程序
uView Cell 单元格
uView Cell 单元格
404 1
|
前端开发 JavaScript 数据格式
echarts异步数据加载(在下拉框选择事件中异步更新数据)
接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了。在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载数据,在实际的工作的中对数据的刷选非常常见,比如在下拉框中选择,时间选择等的一些事件中异步加载数据。
3673 0
|
7月前
|
关系型数据库 MySQL PHP
WordPress 开发入门:代码详解与使用指南
本文详细介绍了WordPress开发入门知识,涵盖基础概念、环境搭建、主题与插件开发及常用技巧。首先讲解了WordPress的核心功能与开发环境配置,接着深入探讨主题开发,包括创建主题文件夹、核心文件(style.css和functions.php)以及模板文件的使用。随后介绍插件开发的基本步骤,如创建插件文件、添加功能并激活插件。最后推荐了开发资源,如官方文档、在线教程和优质市场。通过实践与学习,读者可掌握WordPress开发技术,构建个性化网站。
499 7
|
移动开发 JavaScript 前端开发
"Vue开发者必看:一篇文章教你如何实现px自动转换vw或rem,轻松应对H5页面响应式设计挑战!"
【10月更文挑战第23天】在Vue项目中实现px到vw或rem的自动转换,可以使用PostCSS插件。首先安装`postcss-loader`,然后添加`postcss-px-to-viewport`和`postcss-pxtorem`插件,并在`postcss.config.js`中配置。配置完成后,直接在Vue组件中使用px单位编写样式,PostCSS会自动转换为vw或rem。这样可以简化开发流程,提高代码的可维护性和页面的响应式设计能力。
1174 0
|
前端开发
灯光效果,触手可及:CSS动画让网页设计更出彩!
灯光效果,触手可及:CSS动画让网页设计更出彩!
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
646 0
|
存储 小程序 前端开发
如何设计小程序的站内信功能
如何设计小程序的站内信功能
717 0
|
JavaScript
vue数字滚动效果组件
vue数字滚动效果组件
371 0