乐趣区

关于前端:YonBuilder移动开发平台-AVM-框架-纵向滚动通知栏组件

jiezi

AVM（Application-View-Model）前端组件化开发模式基于规范 Web Components 组件化思维，提供蕴含虚构 DOM 和 Runtime 的编程框架 avm.js 以及多端对立编译工具，齐全兼容 Web Components 规范，同时兼容 Vue 和 React 语法糖编写代码，编译工具将 Vue 和 React 相干语法糖编译转换为 avm.js 代码。

基于规范 Web Components 组件化思维，兼容 Vue / React 语法个性，通过一次编码，别离编译为 App、小程序代码，实现多端开发。

组件性能介绍
用于循环播放展现一组音讯告诉。

首先是组件整体布局，分为左右 2 局部，右边是题目或者图标，左边是音讯的容器盒子。

接管来自父组件的音讯列表数组，通过 v-for 循环把音讯全副填充到容易盒子中。

<view class=”easy-notice-bar_item-box”> <view :style=”istop?’transition:all 0.5s;margin-top: -30px;’:’transition:none;'”> <view class=”easy-notice-bar_item” v-for=”(item,index) in list” data-id={[item.id](http://item.id)} @click=”clickNotice”> <text class=”easy-notice-bar_item-title”>{item.id}{item.content}</text> </view> </view> </view>

通过 overflow: hidden; 暗藏掉去多余的告诉音讯，保障只能显示一条告诉音讯。

.easy-notice-bar_item-box{

height: 20px;
overflow: hidden;
flex: 1;
margin: auto;

}

通过延时器，每一次会把数组的第一位退出到数组的最初一位，而后在删除第一位，这样显示进去的就是下一个，第二次运行时会持续把以后的第一个元素 (也就是原来的第二个) 退出数组的最初一位并删除以后这一位，让下一个元素变成第一位，以此类推。

noticeScroll(){

this.data.istop = true;    
setTimeout(() => {this.props.list.push(this.props.list[0]);
    this.props.list.shift();
    this.data.istop = false;
}, 5000);

},

通过一个定时器来实现循环

this.data.timer = setInterval(()=>this.noticeScroll(),2000);

在循环执行的工夫距离内，先实现容器盒子上移的成果，而后把音讯数组的程序继进行扭转，是以后展现的音讯告诉放在第一的地位，而后勾销过渡的动画，事件一到再次反复执行。

为了不便展现成果，我把容器盒子的 overflow: hidden 勾销掉，理论实现的成果是这样的

把容器盒子的 overflow: hidden 属性加上，就是残缺的成果了

组件开发
组件文件
easy-notice-bar.stml

<template>

<view class="easy-notice-bar_container">
    <view class="easy-notice-bar_ico-box">
        <image class="easy-notice-bar_ico" src={ico} mode="widthFix"></image>
    </view>
    <view class="easy-notice-bar_item-box">
        <view :style="istop?'transition:all 0.5s;margin-top: -30px;':'transition:none;'">
            <view class="easy-notice-bar_item" v-for="(item,index) in list" data-id={item.id} @click="clickNotice">        
                <text class="easy-notice-bar_item-title">{item.id}{item.content}</text>
            </view>
        </view>        
    </view>    
</view>

</template>
<script>
export default {

name: 'easy-notice-bar',
installed(){
    // 开始定时
    this.data.timer = setInterval(()=>this.noticeScroll(),2000);        
},
props:{list:Array},
data() {
    return{
        ico:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABHtJREFUaEPtmV1oHFUUx//nbtLoztQYtBCVUqNsJkmxivpgI4KCtUpaMxsaELVCXwIqQvVFfbJBUF+k1aZFkIIPFiFVdpKI9QOx+NAKYlvxIfthJEZSrPWjmp2lu8neI9MmJUl3d+7M3I0E3Nc553/+vzMzO+feS1jlP1rl/lFXgPSjxiaOienO1Mwf9WqUdoDvH4Jxddx4mxlbQbjJM86gEzHwcMJx9+kG0QqQ6zfXyVn+rZpJZhzuGHGf1AmhFSBrG18xcH8tgxL0QKeTP6YLQgtA1jbuYGAnA7sIaPE1x3wAMjZkjc2kfWN9AiIB5HrNLhZykJl2hDFCTO9QKb87cRTFMPleTmiAS+Z5mBkbwxa/mMf4VJToqcTR/LkwOqEAtJmfd0xM36Bh7on2jy78FBQiMEDuETRxk3GcgTuDFqsVT8BJKrrdQR+nwACZpPESGK/rNH9Zi/CylXLfCKIdCCBnN98qMXcCwLogRQLEnhNo2Jxw/p5QzQkEkLHjBwB6RlU8XBwftJzCs6q5ygC8ByJ7yphaGA9UC4SIm7Qct001Txkg07v2PpD8WlU4SpxkbOoccX9Q0VAGSPcaLxIh0AumYqBSjAR2dTrueyr56gC2MUrAdhXR6DE8ZDmF51R0lADObEd8JmZMAbhORTRqjDd+dzj5bhUdJYBs0tjCjM9VBDXFlCSJG1UWQkoA43Z8jwC9osmcmgxzjzVS+MQvWAkgYxunAdzuJ6b1OtO71kh+wE/TFyCbjG9jpjE/oTpc/11g7p6EU6z5VfYHsI1RXrF/n2VtIE5ZqUJfrebUBMgkzcfA/EEduqss6bcErQgwbsfvEhADAPs+g8pOIgQSsK8RjYNtzvnzy2WuAEjbxm4C9kaoV6/U0wwe6nAKhxYXWAKQTpr9xDxcLweadB+0HPfLBa0lAFnbPM7gzZoK1UsmazmuVREgYxtcr6o6dS3Hvdz4JXdgNQAQcLbdcVsr3oG0bRwm4HGd3dKuRdhrpdwXKr8DffEelvSx9qLaBDkvmboXL3au+BvN2ebTEnxQW02NQgLYmnDcJVNxxQ/Z/LfAmz6v1Vg/kpQAnq+0PV91lLi0YeuN0GxHqhwxmb0NL/CrllNwKkn5D3PJ+DYwDfwHA90kCPtnptz9d3+H2Wp98AVYSPwxaTxcZmwB4E2HN0dsbNV0BsaI6LNSmT+8bdQ961dHGWCxULpv7b2iLHuZLu5Md4UFIuAvCUqDOQ2ib5saOdV2xP3Vz3TVWShI4uJY71zsKjPeBYnrmYQpJJsgMhlsgplIiLxk6RKLPMVkviyF2yR5/BaFDvt5CnUH/ERX8vr/AN5hhwQOgeRJEE1A0jQETZOYPUOFC9Ml8xpjTUm2SuIbmNBKjFaANwBivQTeinrgp+UOzK8j3gSwXvHxKQH8muUUBhXjq4ZpAfDUf+5pbimuKe9klv1gaquwi+2dgU2C6AsC3m9P5cejmvfytQEsNzPR39I8WyxtoBhoriH2y8Yj//ypw/ByjboB1MNsqFFipYyErfMvOTeGQKdiHZsAAAAASUVORK5CYII=',
        timer:null,
        istop:false

    }
},
methods: {noticeScroll(){
        this.data.istop = true;    
        setTimeout(() => {this.props.list.push(this.props.list[0]);
            this.props.list.shift();
            this.data.istop = false;
        }, 5000);            
    },
    clickNotice(e){
        let id = e.currentTarget.dataset.id;
        this.fire('clickNotice',id);
    }
}

}
</script>
<style>

.easy-notice-bar_container {
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding: 10px;
    background-color: #f0f0f0f0;
}
.easy-notice-bar_ico-box{
    margin: auto;
    padding-right: 20px;
}
.easy-notice-bar_ico{
    width: 20px;
    height: 20px;
}
.easy-notice-bar_item-box{
    height: 20px;
    overflow: hidden;
    flex: 1;
    margin: auto;
}
.easy-notice-bar_item{min-height: 30px;}
.easy-notice-bar_item-title{
    font-size: 16px;
    color: #ff7037;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>

组件应用阐明
具体在我的项目中的应用步骤是，第一步将压缩文件中的 easy-notice-bar.stml 文件拷贝到我的项目的 components 目录，通过浏览 readme.md 文档和查看 demo 示例文件 demo-easy-notice-bar.stml 在须要开发的 stml 文件中，引入组件文件，实现页面的开发。

文件目录

理论我的项目中须要的其它组件，能够本人尝试封装组件。

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

退出移动版