Apicloud AVM framework creates digital scrolling components

Digital scrolling components , For digital dynamic effect display . Use today APICloud AVM Frame to create digital scrolling components .

The core function points used in the component are ,background-position Property to set the starting position of the background image . The background picture of each digit is a 0-9 Digital picture , Show different numbers by randomly generating different pictures with different positions .

Generate each position by delaying , To control the frequency of digital switching , This can be customized .

You can customize the actual position of the number , Keep to the left , Keep right , In the middle .

You can customize the number of numbers displayed .

Component files  

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>

Components use

demo-count-up.stml

<template>

<view class="page">

<safe-area></safe-area>

<text> Random sampling {customNum} Digit number plate </text>

<easy-count-up

:during="during"

:customNum="customNum"

:justify="justify"

></easy-count-up>

<text> Random sampling {customNum1} Digit number plate </text>

<easy-count-up

:during="during1"

:customNum="customNum1"

:justify="justify1"

></easy-count-up>

<text> Random sampling {customNum2} Digit number plate </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,// The number scrolls once Unit millisecond

customNum:6,// The number of numbers

justify:'center',// Number number location center,left,right

during1:5000,// The number scrolls once Unit millisecond

customNum1:3,// The number of numbers

justify1:'left',// Number number location center,left,right

during2:3000,// The number scrolls once Unit millisecond

customNum2:5,// The number of numbers

justify2:'right',// Number number location center,left,right

}

},

methods: {

}

}

</script>

<style>

.page {

height: 100%;

background-color: #f0f0f0;

justify-content: flex-start;

align-items: center;

}