使用APICloud AVM框架封裝縱向滾動通知欄組件，該縱向滾動通知欄組件用于循環播放展示一組消息通知。
首先是組件整體布局，分為左右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>
通過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>
示例文件
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>