APICloud AVM框架打造数字滚动组件

数字滚动组件，用于数字的动态效果展示。今天用APICloud AVM框架打造数字滚动组件。

组件中用到的核心功能点是，background-position属性设置背景图像的起始位置。每个数字占位的背景图片是一个0-9数字组成的图片，通过随机产生不同的图片其实位置来展示不同的数字。

通过延迟产生每次的位置，来控制数字切换的频率，这个是可以自定义的。

可自定义数字其实位置，靠左，靠右，居中。

可自定义展示的数字个数。

组件文件 

count-up.stml

<template>

<view class="easy-count-up_container">

<view class="easy-count-up_img" :style="justifyStyle">

<view class="easy-count-up_img-item" :style="item" v-for="item in roundStyle">

</view>

</view>

</view>

</template>

<script>

export default {

name: 'easy-count-up',

props:{

during:Number,

customNum:Number,

justify:String

},

install(){

for (let index = 0; index < this.props.customNum; index++) {

this.data.roundStyle[index]='background-position: 0px 0px;';

}

if(this.props.justify=='left'){

this.data.justifyStyle='justify-content: flex-start;';

}

else if(this.props.justify=='right'){

this.data.justifyStyle='justify-content: flex-end;';

}

},

installed(){

let timer = null;

timer = setInterval(() => {

for (let index = 0; index < this.data.roundStyle.length; index++) {

this.data.roundStyle[index]='background-position: 0px -'+ Math.floor( Math.random()*10 )*58 +'px;';

}

},this.props.during?this.props.during:5000)

},

data() {

return{

customNumber:0,

roundStyle:[],

justifyStyle:'justify-content: center;'

}

},

methods: {

}

}

</script>

<style>

.easy-count-up_container{

width: 100%;

padding: 5px;

background-color: #ffffff;

}

.easy-count-up_img{

height: 47px;

flex-flow: row nowrap;

}

.easy-count-up_img-item{

width: 33px;

height: 47px;

margin-right: 5px;

background-image: url(https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png);

transition: all 800ms ease 0s;

background-repeat: no-repeat;

}

</style>

组件使用

demo-count-up.stml

<template>

<view class="page">

<safe-area></safe-area>

<text>随机抽取{customNum}位数的号码牌</text>

<easy-count-up

:during="during"

:customNum="customNum"

:justify="justify"

></easy-count-up>

<text>随机抽取{customNum1}位数的号码牌</text>

<easy-count-up

:during="during1"

:customNum="customNum1"

:justify="justify1"

></easy-count-up>

<text>随机抽取{customNum2}位数的号码牌</text>

<easy-count-up

:customNum="customNum2"

:justify="justify2"

></easy-count-up>

</view>

</template>

<script>

import '../../components/easy-count-up.stml'

export default {

name: 'demo-easy-count-up',

apiready(){//like created

},

data() {

return{

during:2000,//数字滚动一次的时间 单位毫秒

customNum:6,//数字的个数

justify:'center',//号码数字位置 center,left,right

during1:5000,//数字滚动一次的时间 单位毫秒

customNum1:3,//数字的个数

justify1:'left',//号码数字位置 center,left,right

during2:3000,//数字滚动一次的时间 单位毫秒

customNum2:5,//数字的个数

justify2:'right',//号码数字位置 center,left,right

}

},

methods: {

}

}

</script>

<style>

.page {

height: 100%;

background-color: #f0f0f0;

justify-content: flex-start;

align-items: center;

}