AVM框架 数字滚动组件

wuliyuye

数字滚动组件，用于数字的动态效果展示。

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

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

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

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

组件文件

count-up.stml

1. <template>
   
2.         <view class="easy-count-up_container">
   
3.                 <view class="easy-count-up_img" :style="justifyStyle">
   
4.                         <view class="easy-count-up_img-item" :style="item" v-for="item in roundStyle">
   
5.                         </view>               
   
6.                 </view>
   
7.         </view>
   
8. </template>
   
9. <script>
   
10. export default {
    
11.         name: 'easy-count-up',
    
12.         props:{
    
13.                 during:Number,
    
14.                 customNum:Number,
    
15.                 justify:String
    
16.         },
    
17.         install(){
    
18.                 for (let index = 0; index < this.props.customNum; index++) {
    
19.                         this.data.roundStyle[index]='background-position: 0px 0px;';                       
    
20.                 }
    
21.                 if(this.props.justify=='left'){
    
22.                         this.data.justifyStyle='justify-content: flex-start;';
    
23.                 }
    
24.                 else if(this.props.justify=='right'){
    
25.                         this.data.justifyStyle='justify-content: flex-end;';
    
26.                 }
    
27.         },
    
28.         installed(){               
    
29.                 let timer = null;
    
30.                 timer = setInterval(() => {
    
31.                         for (let index = 0; index < this.data.roundStyle.length; index++) {
    
32.                                 this.data.roundStyle[index]='background-position: 0px -'+ Math.floor( Math.random()*10 )*58 +'px;';
    
33.                         }
    
34.                 },this.props.during?this.props.during:5000)               
    
35.         },
    
36.         data() {
    
37.                 return{                       
    
38.                         customNumber:0,
    
39.                         roundStyle:[],
    
40.                         justifyStyle:'justify-content: center;'
    
41.                 }
    
42.         },
    
43.         methods: {
    
44. 
    
45.         }
    
46. }
    
47. </script>
    
48. <style>
    
49.         .easy-count-up_container{
    
50.                 width: 100%;
    
51.                 padding: 5px;
    
52.                 background-color: #ffffff;
    
53.         }
    
54.         .easy-count-up_img{
    
55.                 height: 47px;
    
56.                 flex-flow: row nowrap;
    
57.         }
    
58.         .easy-count-up_img-item{               
    
59.                 width: 33px;
    
60.                 height: 47px;
    
61.                 margin-right: 5px;
    
62.                 background-image: url(https://img10**.**/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png);
    
63.                 transition: all 800ms ease 0s;
    
64.                 background-repeat: no-repeat;
    
65.         }
    
66. </style>

复制代码

组件使用

demo-count-up.stml

1. <template>
   
2.         <view class="page">
   
3.                 <safe-area></safe-area>
   
4.                 <text>随机抽取{customNum}位数的号码牌</text>
   
5.                 <easy-count-up
   
6.                         :during="during"
   
7.                         :customNum="customNum"
   
8.                         :justify="justify"
   
9.                 ></easy-count-up>
   
10.                 <text>随机抽取{customNum1}位数的号码牌</text>
    
11.                 <easy-count-up
    
12.                         :during="during1"
    
13.                         :customNum="customNum1"
    
14.                         :justify="justify1"
    
15.                 ></easy-count-up>
    
16.                 <text>随机抽取{customNum2}位数的号码牌</text>
    
17.                 <easy-count-up
    
18.                         :customNum="customNum2"
    
19.                         :justify="justify2"
    
20.                 ></easy-count-up>
    
21.         </view>
    
22. </template>
    
23. <script>
    
24. import '../../components/easy-count-up.stml'
    
25. export default {
    
26.         name: 'demo-easy-count-up',
    
27.         apiready(){//like created
    
28. 
    
29.         },
    
30.         data() {
    
31.                 return{
    
32.                         during:2000,//数字滚动一次的时间 单位毫秒
    
33.                         customNum:6,//数字的个数
    
34.                         justify:'center',//号码数字位置 center,left,right
    
35.                        
    
36.                         during1:5000,//数字滚动一次的时间 单位毫秒
    
37.                         customNum1:3,//数字的个数
    
38.                         justify1:'left',//号码数字位置 center,left,right
    
39. 
    
40.                         during2:3000,//数字滚动一次的时间 单位毫秒
    
41.                         customNum2:5,//数字的个数
    
42.                         justify2:'right',//号码数字位置 center,left,right
    
43.                 }
    
44.         },
    
45.         methods: {
    
46.                
    
47.         }
    
48. }
    
49. </script>
    
50. <style>
    
51.         .page {
    
52.                 height: 100%;
    
53.                 background-color: #f0f0f0;
    
54.                 justify-content: flex-start;
    
55.                 align-items: center;
    
56.         }
    
57. </style>

复制代码

示例展示