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、小程序代码,实现多端开发。

 

组件功能介绍

用于循环播放展示一组消息通知。

首先是组件整体布局,分为左右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} @click="clickNotice">   
      <text class="easy-notice-bar_item-title">{item.id}{item.content}</text>
    </view>
  </view>   
</view>

image.gif

通过overflow: hidden;隐藏掉去多余的通知消息,保证只能显示一条通知消息。

.easy-notice-bar_item-box{
  height: 20px;
  overflow: hidden;
  flex: 1;
  margin: auto;
}

image.gif

通过延时器,每一次会把数组的第一位加入到数组的最后一位,然后在删除第一位,这样显示出来的就是下一个,第二次运行时会继续把当前的第一个元素(也就是原来的第二个)加入数组的最后一位并删除当前这一位,让下一个元素变成第一位,以此类推。

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

image.gif

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

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

image.gif

在循环执行的时间间隔内,先完成容器盒子上移的效果,然后把消息数组的顺序继进行改变,是当前展示的消息通知放在第一的位置,然后取消过渡的动画,事件一到再次重复执行。

为了方便展示效果,我把容器盒子的overflow: hidden取消掉, 实际实现的效果是这样的

image.gif编辑

把容器盒子的overflow: hidden属性加上,就是完整的效果了

image.gif编辑

组件开发

组件文件

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>

image.gif

组件使用说明

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

文件目录

image.gif编辑

demo-easy-notice-bar.stml

<template>
  <view class="page">
    <safe-area></safe-area>
    <easy-notice-bar
      :list="listData"
      onclickNotice="showNotcie"
    >
    </easy-notice-bar>
  </view>
</template>
<script>
import '../../components/easy-notice-bar.stml'
export default {
  name: 'demo-easy-notice-bar',
  apiready(){ 
  },
  data() {
    return{
      listData:[
        {id:"1",content:"这是一个用于循环播放展示一组消息通知组件"},
        {id:"2",content:"接社区通知,全员核酸检测时间调整为6:00-11:00,带来不便,敬请谅解。"},
        {id:"3",content:"现摸排60岁~69岁(1953年~1962年出生)未接种疫苗的住户,请主动联系楼管,请大家一定跟自家老人确认,如不报备导致漏报,后果自负。收到请回复,如不回复,我们将视同您已收到,感谢配合。"},
        {id:"4",content:"7月14日(明天)周四,开展全员核酸检测,时间:6:00~11:30,居家健康检测人员不要参加,已放暑假孩子在本小区检测。"}
      ]
    }
  },
  methods: {
    showNotcie(e){
      // console.log(JSON.stringify(e));
      api.toast({
        location:'middle',
        msg:'当前点击了的消息ID是'+e.detail
      })
    }
  }
}
</script>
<style>
  .page {
    height: 100%;
    padding-top: 100px;
  }
</style>

image.gif

实际项目中需要的其它组件,可以自己尝试封装组件。

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

image.gif编辑

相关文章
|
6月前
|
数据库 容器
Flutter笔记:滚动之-无限滚动与动态加载的实现
Flutter笔记:滚动之-无限滚动与动态加载的实现
282 0
|
20天前
|
小程序
Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶
Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶
|
20天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
68 1
|
4月前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
1123 0
|
6月前
|
小程序
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
|
6月前
|
数据库
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
201 0
|
小程序 开发者
wepy框架-触摸内容滑动组件使用步骤
wepy框架-触摸内容滑动组件使用步骤
45 0
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
389 0
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
|
前端开发 定位技术 容器
百度地图高级开发:上滑推拉菜单CSS解决方案
百度地图高级开发:上滑推拉菜单CSS解决方案
89 0
|
搜索推荐
Flutter 使用自定义转场动效提升页面跳转体验
本篇带你如何完成个性化的页面切换。Flutter本身提供了不少预定义的转场动画,可以设计多种多样的转场动画实现个性化的转场效果。
782 0
Flutter 使用自定义转场动效提升页面跳转体验