<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > APICloud AVM框架封裝縱向滾動通知欄組件

使用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>


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产