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

目录

#平台差异说明

#基本使用

#设置滚动相关参数

#是否显示小数位

#千分位分隔符

#滚动执行的时机

#API

#Props

#Methods

#Event


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

注意

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

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序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是带小数的,应该设置decimals为 start-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 | Number0-
end-val结束值String | Number0-
duration滚动过程所需的时间,单位msString | Number2000-
autoplay是否自动开始滚动Booleantruefalse
decimals要显示的小数位数,见上方说明String | Number0-
use-easing滚动结束时,是否缓动结尾,见上方说明Booleantruefalse
separator千位分隔符,见上方说明String--
color字体颜色String#303133-
font-size字体大小,单位rpxString | Number50-
bold字体是否加粗Booleanfalsetrue

#Methods

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

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

#Event

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

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

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

相关文章

C++力扣题目112,113--路径总和,路径总和II

112路径总和 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 叶子节点 是…

以太网交换机——稳定安全,构筑数据之桥

交换机&#xff0c;起源于集线器和网桥等网络通信设备&#xff0c;它在性能和功能上有了很大的发展&#xff0c;因此逐渐成为搭建网络环境的常用的设备。 随着ChatGPT爆发&#xff0c;因为用户量激增而宕机事件频频发生&#xff0c;云计算应用催生超大规模算力需求&#xff0c;…

java通过okhttp方式实现https请求的工具类(绕过证书验证)

目录 一、引入依赖包二、okhttp方式实现的https请求工具类2.1、跳过证书配置类2.2、okhttp方式的 https工具类 三、测试类 一、引入依赖包 引入相关依赖包 <!--okhttp依赖包--> <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>…

常用的 Python 开发工具以及它们的优势

对于 Python 编程新手来说&#xff0c;选择合适的开发工具是一个关键的步骤。以下是一些常用的 Python 开发工具以及它们的优势&#xff1a; 1. 开发环境 (IDEs): ■ PyCharm: ◆ 优势&#xff1a;提供了强大的代码编辑、调试、代码分析等功能。对于 Django、Flask 和其他 Pyth…

vite和vue启用gzip

Nginx 配置 server {listen 8230;server_name 8230;charset utf-8;gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 1k;gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/x…

力扣(leetcode)第541题反转字符串II(Python)

541.反转字符串II 题目链接&#xff1a;541.反转字符串II 给定一个字符串 s 和一个整数 k&#xff0c;从字符串开头算起&#xff0c;每计数至 2k 个字符&#xff0c;就反转这 2k 字符中的前 k 个字符。 如果剩余字符少于 k 个&#xff0c;则将剩余字符全部反转。 如果剩余字…

Vue、uniApp、微信小程序、Html5等实现数缓存

此文章带你实现前端缓存&#xff0c;利用时间戳封装一个类似于Redis可以添加过期时间的缓存工具 不仅可以实现对缓存数据设置过期时间&#xff0c;还可以自定义是否需要对缓存数据进行加密处理 工具介绍说明 对缓存数据进行非对称加密处理 对必要数据进行缓存&#xff0c;并…

php通用后台开发框架源码

php通用后台开发框架源码 基于ThinkPHPBootstrap的快速后台开发框架。 基于Auth验证的权限管理系统&#xff0c;支持无限级父子级权限继承&#xff0c;父级的管理员可任意 增删改子级管理员及权限设置&#xff0c;支持单管理员多角色&#xff0c;支持管理子级数据或个人数据。 …

探讨回溯算法的秘密(Java实现)

深入探讨回溯算法及Java实现 介绍&#xff1a; 回溯算法是一种经典的递归算法&#xff0c;用于解决在给定约束条件下的搜索问题。它通过尝试所有可能的解决方案&#xff0c;并在不满足约束条件的情况下回溯到上一步&#xff0c;继续尝试其他可能的解决方案。在本文中&#xff…

Linux学习记录——삼십구 数据链路层协议

文章目录 1、了解数据链路层2、认识以太网3、认识MAC地址4、以太网报文5、局域网通信原理1、基本原理2、数据碰撞3、交换机4、ARP协议5、RARP协议6、局域网中间人 6、DNS&#xff08;简单介绍&#xff09;7、ICMP协议1、报文2、traceroute命令 7、NAT技术1、基本过程2、NAPT3、…

GO项目自动化-根据库表字段自动生成API

根据库表字段自动生成API 一个项目开发离不开数据库的增删改查&#xff0c;API功能也基本围绕着表的CRUD&#xff1a;增加(Create)、读取(Read)、更新(Update)和删除(Delete)。每个表写一个CRUD&#xff0c;方法都差不多&#xff0c;逻辑也非常相似。 那么有没有可能根据表结构…

C++力扣题目111--二叉树的最小深度

力扣题目链接(opens new window) 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明: 叶子节点是指没有子节点的节点。 示例: 给定二叉树 [3,9,20,null,null,15,7], 返回它的最小深度 2 思路 看完了这篇104.二…

Java入门IDEA基础语法

1&#xff1a;Java入门 1.1 Java简介 Java是什么&#xff1a; Java是一门非常优秀的计算机语言 语言&#xff1a;人与人交流沟通的表达方式 计算机语言&#xff1a;人与计算机之间进行信息交流沟通的一种特殊语言 Java之父&#xff1a;詹姆斯高斯林&#xff08;James Gosli…

履践致远 载誉前行 | 甄知科技获评多项荣誉资质认定!

砥砺深耕 履践致远 甄知科技不断精进 持续成长 获评多项荣誉资质认定 23年4月 甄知成功入库科技型中小企业名单 2023年4月&#xff0c;上海市科技技术委员会公布2023年第二批入库科技型中小企业名单&#xff0c;依据《科技型中小企业评价办法》等要求&#xff0c;经各级评价工…

《尚贤达猎头网站流量统计模块》,通过HTTP自定义模块实时获取asp.net网站访问流量,并保存到数据库

开发了个网站流量统计模块&#xff0c;实时获取asp.net网站访问流量&#xff0c;并保存到数据库。 一、功能&#xff1a; 通过HTTP自定义模块实时获取网站流量 二、支持平台&#xff1a;windowsIIS 三、安装方法&#xff1a; 1、将文件www.sunsharer.cn.dll复制到网站bin目录下…

汽车出海业务专业术语

引言 本文是笔者在做中国汽车出口欧洲业务的信息化建设过程,积累的一些专业术语注解,供诸位参考交流。 专业术语清单 报关   报关是指出口货物的所有者或其代理人,根据中国海关法和相关法规,向海关申报货物的出口情况,并提交相关单证,以便海关对货物进行监管和征税。…

什么是算法的时间复杂度?

一、问题 算法的时间复杂度是评测算法好坏的主要指标&#xff0c;那么什么是算法的时间复杂度呢&#xff1f; 二、解答 算法的时间复杂度度量主要是计算⼀个算法所⽤的时间&#xff0c;算法所⽤的时间主要包括程序编译时间和运⾏时间。由于⼀个算法⼀旦编译成功就可以多次运⾏…

孩子用什么样的灯对眼睛没有伤害?分享最合适孩子的护眼台灯

为人父母以后&#xff0c;孩子健康成长一定是摆放在首位的&#xff0c;随着孩子慢慢长大&#xff0c;步入更高的年级&#xff0c;作业课程也在随之增多。不少孩子哪怕夜色已经降临&#xff0c;仍就伏案在桌子上完成没有做完的功课&#xff0c;作为父母的我们不得不担心孩子的视…

记录一下Canal的错误,主要是top.javatool.canal.client.util下的StringConvertUtil引起的

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 由于数据库的一个localdatetime字段是空的&#xff0c; 然后修改数据库数据同步canal的时候报了这个错误&#xff1a; Caused by: java.lang.IllegalArgumentException: Can not set java.time.LocalD…

浏览器输入一个域名的解析过程

目录 从输入一个域名的解析过程 以www.baidu.com为例子 本地缓存和hosts文件 mDNS和LLMNR NBT-NS 路由器广播 Root域名服务器 顶级域名服务器 目标域名服务器 DNS解析完成 操作系统发起TCP连接&#xff1a; TCP三次握手&#xff1a; TCP连接的建立采用经典的三次握手过程&#…