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是带小数的,应该设置decimals为 startValendVal一样的小数位数值,如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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598350.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -后端架构搭建

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

Java接口和抽象类的区别?

Java接口和抽象类的区别&#xff1f; Java接口和抽象类的含义&#xff1a; 接口&#xff08;Interface&#xff09;&#xff1a; 含义&#xff1a; 接口是一种抽象类型&#xff0c;它定义了一组抽象方法&#xff0c;但不能包含具体实现。接口可以包含常量和默认方法&#xff0c…

单目标跟踪算法SiamRPN

目标跟踪算法包括单目标跟踪和多目标跟踪&#xff0c;单目标跟踪在每张图片中只跟踪一个目标。目前单目标跟踪的主要方法分为两大类&#xff0c;基于相关滤波(correlation filter)的跟踪算法, 如CSK&#xff0c; KCF, DCF, SRDCF等&#xff1b;基于深度学习的跟踪算法&#xff…

PPI+机器学习+免疫浸润+实验验证,如此简单也能发4+

今天给同学们分享一篇生信文章“Identification of metabolic biomarkers associated with nonalcoholic fatty liver disease”&#xff0c;这篇文章发表在Lipids Health Dis期刊上&#xff0c;影响因子为4.5。 结果解读&#xff1a; 识别NAFLD患者的MR DEG 主成分分析&…

MFC CRuntimeClass 学习

新建一个控制台工程,按以下步骤; 定义对象Person,继承CObject,在头文件中添加宏:DECLARE_DYNCREATE(Person) 在源文件中添加宏:IMPLEMENT_DYNCREATE(Person, CObject) main.cpp中, 使用宏:CRuntimeClass* pRuntimeClass = RUNTIME_CLASS(Person);运行时类信息 使用运行…

分布式图文详解!

分布式理论 1. 说说CAP原则&#xff1f; CAP原则又称CAP定理&#xff0c;指的是在一个分布式系统中&#xff0c;Consistency&#xff08;一致性&#xff09;、 Availability&#xff08;可用性&#xff09;、Partition tolerance&#xff08;分区容错性&#xff09;这3个基本…

Python基础知识:整理5 序列切片操作

序列是指&#xff1a;内容连续、有序&#xff0c;可使用下标索引的一类数据容器&#xff0c;列表、元组、字符串均可以视为序列 # 序列的切片操作 """语法&#xff1a;序列[起始下标:结束下标:步长]1.起始下标表示从何处开始&#xff0c;可以留空&#xff0c;留…

C# xml序列化和反序列化

问题 有的项目使用webservice返回结果是xml&#xff0c;需要进行xml序列化和反序列化 xml序列化相关特性 C#中&#xff0c;XML序列化相关的特性主要包括&#xff1a; XmlIgnore&#xff1a;这个特性可以用来指示序列化过程忽略一个属性或一个字段。当使用XmlIgnore特性时&a…

Android 13.0 recovery竖屏界面旋转为横屏

1.概述 在13.0系统项目定制化开发中,由于平板固定横屏显示,而如果recovery界面竖屏显示就觉得怪怪的,所以需要recovery页面横屏显示的功能, 所以今天就来解决这个问题 2.实现功能相关分析 Android的Recovery中,利用 bootable\recovery下的minui库作为基础,采用的是直接…

Double 4 VR智能互动系统模拟陪同口译实训教学场景

Double 4 VR智能互动系统模拟陪同口译实训教学场景&#xff0c;以其独特的特点和优势&#xff0c;为口译学生提供了一种全新的教学体验。通过模拟场景和虚拟角色&#xff0c;在真实的语境中进行口译实训&#xff0c;学生可以更加深入地理解口译技巧和实践&#xff0c;提高口译水…

服务注册中心

服务注册中心 注册中心与CAP理论介绍 1.注册中心 服务注册中心是微服务架构中的一个关键组件&#xff0c;它的主要作用是管理服务实例的注册、维护和发现。 是一个中心化的组件来分散的微服务实例的位置和状态。 注册中心有三种角色构成&#xff1a; 服务提供者&#xff1a…

SSM框架注解大全

先赞后看&#xff0c;养成习惯&#xff01;&#xff01;&#xff01;❤️ ❤️ ❤️ 文章码字不易&#xff0c;如果喜欢可以关注我哦&#xff01; ​如果本篇内容对你有所启发&#xff0c;欢迎访问我的个人博客了解更多内容&#xff1a;链接地址 SSM框架注解大全 三大框架注解…

Huffman树实现文件压缩

【问题描述】给定一个文件&#xff0c;文件由n个字符组成&#xff0c;但他们出现的频度不相同。要求对该文件中的字符集构造哈夫曼树&#xff0c;并计算编码后的文件长度。 【输入形式】 输入的第1行有1个数字n&#xff0c;表示文件中总的字符个数。接下来1行中有n个数字&…

跨境电商竞品分析:洞察市场,赢得先机的关键策略

在全球化日益加速的今天&#xff0c;跨境电商已经成为了企业拓展市场、提高销售额的重要手段。然而&#xff0c;跨境电商市场的竞争也日趋激烈&#xff0c;如何在众多竞争对手中脱颖而出&#xff0c;成为每个企业都面临的挑战&#xff1b;想要做到这点&#xff0c;了解竞品情况…

Apache Doris (六十一): Spark Doris Connector - (1)-源码编译

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Spark Doris Connector…

vue3中状态管理库pinia的安装和使用方法介绍及和vuex的区别

Pinia 与 Vuex 一样&#xff0c;是作为 Vue 的“状态存储库”&#xff0c;用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话&#xff0c;你可能会认为可以通过一行简单的 export const state reactive({}) 来共享一个全局状…

【Python】开始你的Python之旅(Anaconda、Pycharm、Jupyter)

Python工具准备 下载安装AnacondaPycharmJupyter Notebook 启动使用AnacondaPycharmJupyter Notebook 引言&#xff1a; 信息时代&#xff0c;计算机引领。人工智能&#xff0c;Python是基础。信息时代学习好Python乃是在人工智能时代的立足之本。 本文&#xff1a; 做好Pyth…

开发者必备的 Github 加速工具(截至2024年01月)

开始闲聊前&#xff0c;我要感谢大神小青龍总结的博文&#xff1a;作为程序员不得不知道的几款Github加速神器&#xff0c;给我们介绍了常用&#xff08;较为合规&#x1f604;&#xff09;的加速方法。毕竟 github 是开发者绕不过的宝库。 背景 我用 Github 将近12年&#x…

JS鼠标事件总结学习

首先我们先简单过一遍鼠标MouseEvent事件&#xff1a; click: 当鼠标单击元素时触发。dblclick: 当鼠标双击元素时触发。mousedown: 当按下鼠标按钮时触发。mouseup: 当释放鼠标按钮时触发。mousemove: 当鼠标指针在元素上移动时触发。mouseover: 当鼠标指针移动到元素上方时触…

C++精进之路之路(九)内存模型和名称空间

C鼓励程序员在开发程序时使用多个文件。一种有效的组织策略是&#xff0c;使用头文件来定义用户类型&#xff0c;为操纵用户类型的两数提供两数原型&#xff1a;并将两数定义放在一个独立的源代码文件中。头文件和源代码文代一起定义和实现了用户定义的类型及其使用方式。最后&…