Vue.js中平滑的文本和数字滚动动画– vue-roller

Vue.js中平滑的文本和数字滚动动画– vue-roller

插件名称:vue-roller

发布时间:2020年6月23日

插件作者:Andy-0414

官网 演示 GitHub下载

滚子是Vue.js组件,可将高性能且平滑的滚动动画应用于您指定的文本和数字。

变更日志:

2020年7月31日

  • v1.12.3:错误修正

2020年7月31日

  • v1.12.2:错误修正

2020年7月24日

  • v1.12.1:修复defaultChar错误

2020年7月20日

  • v1.11.2:更新修订副本错误

07/20/2020

  • v1.10.0

2020年7月4日

  • v1.9.0

安装和下载:

# NPM
$ npm install vue-roller --save

如何使用它:

1.导入并注册vue-roller。

import Roller from "vue-roller";
export default {
       components:{
         Roller
         ...
       }
       ...
}

2.将Roller组件添加到模板中,并指定要在其上应用滚动动画的内容。

<Roller text="vuescript"></Roller>

3.确定滚动动画的持续时间。默认值:0.5。

<Roller transition=".8"></Roller>

4.显示数值的千位分隔符。默认值:false。

<Roller isNumberFormat="true"></Roller>

5.在开始动画之前,指定要显示的初始文本。

<Roller defaultChar="vue"></Roller>

6.指定用于滚动动画的字符数组。默认值:[“ 0”,“ 1”,“ 2”,“ 3”,“ 4”,“ 5”,“ 6”,“ 7”,“ 8”,“ 9”]。

<Roller :charList="['v', 'u', 'e']"></Roller>
相关插件