vue实现的数字滚动组件
- 良好兼容性：自动检测环境，优先使用transform+transition完成滚动效果，如果不支持css属性使用margin+tween缓动函数实现流畅的滚动效果。
- 配置灵活：支持参数自定义配置滚动效果，滚动时间以及如何滚动的策略（后续会单独讲到）
- 支持良好：用户可覆写整体样式，实现自己的界面样式，digitroll会在组件挂在之后读取对应高度，进行滚动。
$ npm i -S @huoyu/vue-digitroll //之前的包无法正常import，目前问题已解决，更新到1.0.4可以正常使用~
<template>
<div style="width:320px;">
<DigitRoll :rollDigits="digits" />
</div>
</template>
<script>
import DigitRoll from '@huoyu/vue-digitroll';
export default {
components: { DigitRoll },
data () {
return {
digits: 123456,
}
}
}
</script>
关键代码
<template>
<div style="width:320px;margin:0 auto" id="app">
<DigitRoll
:rollDigits='digits'
:flipStra = "true"
@roll-finish="restart"
/>
</div>
</template>
/** vue methods */
function restart() {
const random = `${Math.random()}`.substr(2).substr(0, 4);
setTimeout(() => {
this.digits = random;
}, 400);
}
关键代码
<template>
<div style="width:320px;margin:0 auto" id="app">
<DigitRoll
:rollDigits='digits'
:flipStra = "false"
@roll-finish="restart"
/>
</div>
</template>
/** vue methods */
function restart() {
const random = `${Math.random()}`.substr(2).substr(0, 4);
setTimeout(() => {
this.digits = random;
}, 400);
}
关键代码
<template>
<div style="width:320px;margin:0 auto" id="app">
<DigitRoll
ref='digitroll'
:rollDigits='digits'
:flipStra = "flipStra3"
easeFn=""
@roll-finish="record"
/>
</div>
</template>
/** vue methods */
flipStra3(before, next) {
if (next <= before) {
return true;
}
return false;
},
关键代码
<template>
<div style="width:320px;margin:0 auto" id="app">
<DigitRoll
ref='digitroll'
:rollDigits='digits'
:flipStra = "true"
/>
<input type="text" v-model='input'>
<button @click='changeDigit'>click me</button>
</div>
</template>
/** vue methods */
function changeDigit() {
this.$refs.digitroll.setDigit(this.input);
}
关键代码
<template>
<div style="width:320px;margin:0 auto" id="app">
<DigitRoll
ref='digitroll'
:rollDigits='digits'
:flipStra = "true"
/>
<input type="text" v-model='input'>
<button @click='changeDigit'>click me</button>
</div>
</template>
/** vue methods */
function changeDigit() {
this.$refs.digitroll.setDigit([{
value: 2,
dur: 600,
}, {
value: 4,
dur: 900,
}, {
value: 6,
dur: 1200,
}, {
value: 8,
dur: 1500,
}]);
}
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| rollDigits | 滚动到的数字 | [String, Number] | - | 1000 |
| dur | 滚动持续时间，单位ms | Number | - | 1000 |
| easeFn | 滚动的缓动函数 | String | 'Linear', 'Quad.easeIn', 'Quad.easeOut', 'Quad.easeInOut','Cubic.easeIn', 'Cubic.easeOut', 'Cubic.easeInOut' | Cubic.easeInOut 或者 transition-timing-function |
| flipStra | 滚动时的翻屏策略 | [Function, Boolean] | - | 内部默认策略 |
easeFn: 由于滚动效果有两种实现方式（transition和js计算实现），增对两种模式需要的参数其实是不一致的。transition指定transition-timing-function描述动画过渡效果，js方式需要通过tween函数实现。这里做了兼容，transition模式除了传通常的transition-timing-function，如果easeFn设定为表格上的可选值如"Quad.easeInOut"会转成对应的cubic-bezier。如果是不支持transition的模式下，还是支持表格中的缓动函数（这里缓动函数只提供几种基本的动画形式，缓动函数的基础概念可点击这里查看），其它值不会生效默认按照"Cubic.easeInOut"进行处理。
flipStra: 当数字滚动到一个较大的数字时，这时需要滚动到一个小数字时，通常有两种做法，1.从大数字往回向上滚动 2.始终保持一个方向（这里是向下）滚动。对于第二种做法通常更加麻烦，需要复制一份滚动模板，然后从一个数字滚动到第二份模板，这样保持滚动方向始终一致。对于滚动到克隆模板的动作我称之为翻屏（姑且这么称呼了，想不到更好的说法了）。这里DigitRoll提供的flipStra参数，就是用来控制所谓的翻屏的策略。flipStra可以传入一个函数，接受两个参数: 1.before(之前的数值) 2.next(需要跳转的数值)。用户就可以通过函数自定义策略，函数返回"true",那么就会翻屏滚动。返回"false",那么数字只会在当前模板进行上下滚动。这里提供便捷设置，flipStra可以为布尔值。
| 事件名 | 说明 | 函数 |
|---|---|---|
| roll-start | 数字动画滚动开始时触发 | Function(): void |
| roll-finish | 数字动画滚动结束时触发 | Function(): void |
| 方法名 | 说明 | 参数 |
|---|---|---|
| setDigit | 立即设置数字滚动 | digit: String[,opt: Object] 或者 opts: Arrayopt: Object |
setDigit提供更加灵活的操作数字滚动的方式。可以为下一次滚动做一次单独的设置，甚至可以单独配置每一个数字的滚动行为，而不会覆盖整体的props。方法提供两种参数形式：
// 第一种 digit必传 opt可缺省
this.$refs.digitroll.setDigit('2459', {
dur: '2000',
easeFn: 'ease',
flipStra: true,
});// 第二种
this.$refs.digitroll.setDigit([{
value: 2,
dur: 600,
easeFn: 'ease',
}, {
value: 4,
dur: 900,
flipStra: true,
}, {
value: 6,
dur: 1200,
flipStra: false,
}, {
value: 8,
dur: 1500,
}]);