关于前端:YonBuilder移动开发平台-AVM框架-数字滚动组件

37次阅读

共计 3185 个字符,预计需要花费 8 分钟才能阅读完成。

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 组件库中,没有找到理论我的项目中须要的组件,能够本人尝试封装组件。

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

正文完
 0