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.rhkb.cn/news/236976.html

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

相关文章

腾讯云免费服务器怎么申请?腾讯云免费服务器申请难吗?

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云服务器网txyfwq.com分享2024年最新腾讯云免费…

如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana|Part 2

在 Part 1 中&#xff0c;我们一起了解了什么是 Prometheus 和 Grafana&#xff0c;以及使用这些工具的前提条件和优势。在本部分&#xff0c;将继续带您学习如何安装 Helm 以及如何使用 Prometheus Helm Charts。 开始使用 Helm 和 Helm Chart ArtifactHub 为 Helm Chart 提供…

uniapp 开发小程序的时候使用自定义 tabbar 时出现切换页面闪烁的情况

问题&#xff1a;在使用自定义组件的时候可以看到页面切换明显的闪烁, 这种体验是很不好的, 当然最好的方式就是使用原生导航栏, 不要搞花里胡哨的东西。 来看下体验不好的效果 优化调整 先说思路&#xff0c;就是仍然设置原生 tabbar, 在应用启动的时候主动隐藏原生 tabba…

vue3hooks的使用

在 Vue 3 中&#xff0c;hooks 是用于封装组件逻辑的方法&#xff0c;类似于 Vue 2 中的 mixins。 使用 Hooks 可以提高代码的可维护性、可读性、可复用性和可测试性&#xff0c;降低代码之间的耦合度&#xff0c;使得组件的状态更加可控和可预测。 要使用 hooks&#xff0c;…

半小时实现GPT纯血鸿蒙版

仅需半小时&#xff0c;即可实现纯血鸿蒙版本的ChatGPT&#xff01; 废话少说&#xff0c;先看效果图&#xff1a; 如上图所示&#xff0c;这个小Demo实现了AI智能问答。靠右加粗的文本是用户点击底部提交按钮后出现的&#xff1b;后面靠左对齐的普通文本是来自AI的回答内容。当…

Blazor中使用impress.js

impress.js是什么&#xff1f; 你想在浏览器中做PPT吗&#xff1f;比如在做某些类似于PPT自动翻页&#xff0c;局部放大之类&#xff0c;炫酷无比。 官方示例直接放到Blazor中是不可用的。几经尝试&#xff0c;用以下方法可以实现。 &#xff08;写文不易&#xff0c;请点赞、…

C语言宏定义小技巧

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、定义一年多少秒&#xff08;除闰年&#xff09;举例运行结果出现的问题原因 二、定义整型数据要避免的坑举例运行结果原因解决方法 三 、未完待续 前言 提…

统计学-R语言-4.3

文章目录 前言直方图茎叶图箱线图练习 前言 本篇介绍的是数值型数据怎么进行数据可视化&#xff0c;本篇介绍的有直方图、茎叶图、箱线图。 直方图 直方图&#xff08;Histogram&#xff09;用于描述连续型变量的频数分布&#xff0c;实际应用中常用于考察变量的分布是否对称…

通过代理连接sftp

通过nginx代理连接sftp 1.问题描述2.代码实现3.nginx配置3.1 创建sftp.stream文件3.2 修改nginx配置 4.重启nginx生效 1.问题描述 问题是这样的。我们现在需要在微服务所在内网的A机器连接到外网的sftp&#xff0c;但是网络又不能直接到达。然后A机器到B机器是通过的&#xff…

怎么找微信服务器的IP地址

首先&#xff0c;让微信客户端在PC端运行&#xff0c;在任务管理器->详细信息中&#xff0c;找到WeChat.exe的进程&#xff0c;找到PID 就是微信进程的ID号&#xff0c;如下图所示&#xff1a; 打开一个命令行窗口&#xff0c;cmd或者powershell窗口都可以&#xff0c;输入…

使用FreeBASIC设计8051单片机汇编编译器

在STC论坛上看到有人用C语言实现8051汇编编译器&#xff08;源码&#xff09;&#xff0c;好奇下&#xff0c;试着用FB写了一下。 基本原理就是通过分析汇编文件然后转换为机器码。以下是51汇编与机器码对应的表格&#xff08;数据来自网络&#xff0c;如果发现有误请联系QQ149…

Qt6安装教程

由于QT在5.14版本后不再有离线安装版本&#xff0c;均需要通过在线安装 1.下载exe安装包 打开Open Source Development | Open Source License | Qt&#xff0c;往下拉&#xff0c;找到红框所示的按钮 点进去后点击Download即可 2 安装 下载完成后可得到qt-unified-windows…

通过 CMake 制作库文件 静态库 和 动态库

hehedalinux:~/Linux/loveDBTeacher-v2$ tree . ├── CMakeLists.txt ├── include │ └── head.h ├── main.c └── src├── add.c├── div.c├── mult.c└── sub.c CMake Calc 项目 在这里有add.c,div.c,mult.c,sub.c,main.c,head.h 二、生成静态库 …

【抓包教程】BurpSuite联动雷电模拟器——安卓高版本抓包移动应用教程

前言 近期找到了最适合自己的高版本安卓版本移动应用抓HTTP协议数据包教程&#xff0c;解决了安卓低版本的问题&#xff0c;同时用最简单的办法抓到https的数据包&#xff0c;特此进行文字记录和视频记录。 前期准备 抓包工具&#xff1a;BurpSuite安卓模拟器&#xff1a;雷…

Docker之数据卷的使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Docker之数据卷的使用》。&#x1f3af;&#x…

SSM框架学习笔记04 | SpringMVC

文章目录 一、SpringMVC简介二、 请求与响应1. 请求映射路径2. get请求与post请求3. 响应 二、REST风格1.简介 三、 SSM整合四、拦截器1. 定义拦截器2.配置拦截器3.拦截器执行顺序4.拦截器参数5.多个连接器工作流程分析6.拦截器链的运行顺序 一、SpringMVC简介 SpringMVC技术与…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-1 CSS3过渡

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>CSS3 过渡</title> <style> /*显示*/ .box {width: 100px;height: 100px;background-color: #eee;/*透明度*/opacity: 1;/*过渡*/transition: 3s; } /…

搭建 MyBatis 环境

目录 1.添加依赖 2.数据库连接配置 3.配置XML路径 4.下载插件MyBatisX 5.如何使用 6.示例 1.添加依赖 创建新项目时添加两个依赖: MyBatis Framewrok 和 MySQL Driver 。 如果是在已经创建好的项目中配置mybatis环境。需要先下载一个插件&#xff1a;EditStarters 。 然…

【AIGC】Controlnet:基于扩散模型的文生图的可控性

前言 controlnet可以让stable diffusion的生图变得可控。 文章连接&#xff1a;https://arxiv.org/pdf/2302.05543.pdf 摘要 冻结了stable diffusion的预训练模型并重用它的预训练编码层神经网络结构与零初始化卷积层连接&#xff0c;从零开始逐渐增加参数&#xff0c;并确…

DNS域名解析服务器

前言 一、域名 1、域名的概念和作用 2、域名与ip地址的关系 3、域名的构成 二、DNS服务器 1、DNS服务器的概念和作用 2、DNS服务器的优势 3、DNS服务器的类型 4、DNS服务器的查询方式 4.1 递归查询 4.2 迭代查询 5、DNS服务器查询原理过程 6、本地系统上的域名解析…