vue实现数字滚动效果

近期在做项目的时候，产品要求实现数字滚动效果如下：

用jquery实现

html:
<div class="develop">
<!--滚动的数字--><p><span class="shuzi">3000000</span></p><p><span class="shuzi">60000</span></p></div>

js:
$(".navigation_right li").click(function () {$(this).siblings('li').removeClass("yanse");});let arr = $(".develop>p>.shuzi");arr.each(function(e, a){let num = $(a).text()let i = 0;let count = parseInt(num /500);let timer = setInterval(function(){$(a).text(i)i += count;if (i > num)window.clearInterval(timer)}, 5)})

这样做有一个问题，只能和500取余且为整数，而且滚动的时间也没发控制，显然是不满足我们的业务场景的。

用vue-countTo实现

vue-countTo是一个无依赖，轻量级的vue组件，可以自行覆盖easingFn。

安装使用

npm install vue-count-to

例子

<template><countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
//直接引入组件'vue-count-to'import countTo from 'vue-count-to';export default {//注册组件components: { countTo },data () {return {//数字开始startVal: 0,//数字结束endVal: 50000}}}
</script>

其中：startVal为开始数字，startVal为结束数字，duration为滚动时长， decimal：保留小数点后几位

Property	Description	type	default
startVal	开始值	Number	0
endVal	结束值	Number	2017
duration	持续时间，以毫秒为单位	Number	3000
autoplay	自动播放	Boolean	true
decimals	要显示的小数位数	Number	0
decimal	十进制分割	String	.
separator	分隔符	String	,
prefix	前缀	String	''
suffix	后缀	String	''
useEasing	使用缓和功能	Boolean	true
easingFn	缓和回调	Function	—

** 注意：当autoplay：true时，它将在startVal或endVal更改时自动启动**

Function Name	Description
mountedCallback	挂载以后返回回调
start	开始计数
pause	暂停计数
reset	重置countTo

vue做数字滚动效果相关推荐

vue实现数字滚动效果
vue实现数字滚动效果 npm 下载 vue-count-to https://npmmirror.com/package/vue-count-to
Vue 实现数字滚动效果
效果就是显示某个数值不是直接显示,而是从0开始滚动,直到为那个数值时停止滚动 1.新建数字滚动组件:test.vue文件 <template><div class="num ...
php实现数字滚动效果,vue如何实现数字滚动增加效果？代码示例
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^ 数字滚动组件: 0 props: { time: { type: Number, default: 2 ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
CSS3简单实现，数字滚动效果
之前项目要做一个数字滚动效果. 因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下. 首先每一个数字拆成单个数字. 我这边9个数字,根据自己需要添加. /* ...
CSS3 + JS 数字滚动效果
原生JS+CSS3版: <!DOCTYPE html> <html> <head><title>CSS3 数字滚动效果</title> &l ...
【网站】数字滚动效果的实现方法
代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...

vue做数字滚动效果

vue实现数字滚动效果

用jquery实现

用vue-countTo实现

安装使用

例子

vue做数字滚动效果相关推荐

最新文章

热门文章