APICloud AVM框架 数字滚动组件

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。

组件功能介绍

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

组件中用到的核心功能点是，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>

组件使用说明

本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。

首先需要登录开发平台，http://www.apicloud.com。 通过控制平台右上方的模块Store进入，然后选择AVM组件。

 

找到对应模块点击进入。 

 也可通过搜索栏，通过组件名称关键字进行检索。

 

进入模块详情，点击立即下载下载完整的组件安装包。  

 组件压缩包的文件目录如下

也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。 

 具体在项目中的使用步骤是，第一步将压缩文件中的easy-count-up.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-easy-count-up.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。

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;
	}
</style>

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

这是组件化开发的在线文档地址