数字滚动组件，用于数字的动态效果展示。今天用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;
}