vue.js上下滚动_Vue.js流畅流畅的滚动动画

vue.js上下滚动

滚子 (vue-roller)

Fluid and smooth rolling animation for Vue.js.

Vue.js流畅流畅的滚动动画。

View Demo 查看演示 View Github 查看Github

入门 (Getting Started)

npm

npm

npm i vue-roller

Vue

Vue

import Roller from "vue-roller";

export default {
    components:{
        Roller
    }
}
...

Vue-typescript

Vue打字稿

import Roller from "vue-roller";

@Component({
	components: { Roller }
})
...

选件 (Options)

文字(必填) (text (Required))

<Roller text="1234">

Displays text.

显示文字。

过渡 (transition)

<Roller transition="1">

Sets the time for the animation to complete in second(s). 0.5 by default.

设置动画完成的时间(以秒为单位)。 默认0.5 。

isNumberFormat (isNumberFormat)

<Roller isNumberFormat="true">

Can be set to true if you want to display commas as thousands separators. false by default.

如果要将逗号显示为数千个分隔符，可以将其设置为true 。 默认为false 。

字符列表 (charList)

<Roller :charList="['a', 'b', 'c']">

Sets the list of characters used for the animation.

设置用于动画的字符列表。

Default: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

默认值： ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

defaultChar (defaultChar)

<Roller defaultChar="0">

Sets the text to display when the page is first loaded before the animation actually starts. "" by default.

设置在动画实际开始之前首次加载页面时显示的文本。 默认情况下为"" 。

翻译自: https://vuejsexamples.com/fluid-and-smooth-rolling-animation-for-vue-js/

vue.js上下滚动