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 组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。
这是组件化开发的在线文档地址
评论