搜索了一堆小程序公告實(shí)現(xiàn)都不完善胡陪，要么卡頓，要么實(shí)現(xiàn)復(fù)雜碍舍，關(guān)鍵一點(diǎn)是很多都過(guò)度處理了柠座。所以我用了個(gè)小技巧，用swiper實(shí)現(xiàn)片橡。
wxml如下：
<!--?公告?-->
<view?class="swiper-wrap">
????<text?class='swiper-left'>公告：</text>
????<swiper?autoplay="true"?interval="{{interval}}"?duration="{{duration}}"?class="swiper-right">
????????<block?wx:for="{{msgList}}"?wx:key="id">
????????????<swiper-item>
????????????????<view?class="swiper-item">{{item.title}}</view>
????????????</swiper-item>
????????</block>
????</swiper>
</view>
<!--?公告?end?-->
wxss如下：
/*?公告start?*/
.swiper-wrap{
????display:?flex;????
????justify-content:?center;
????align-items:?center;
}
.swiper-left{
????flex-basis:?15%;
}
.swiper-right{
????flex-basis:?85%;
????height:?50rpx;
????line-height:?50rpx;
}
/*?公告end?*/
javascript如下：
Page({
????data:?{
????????msgList:?[
????????????{
????????????????id:?1,
????????????????url:?'a123',
????????????????title:?'【評(píng)分標(biāo)準(zhǔn)】頁(yè)可以查看不同年齡段的評(píng)分標(biāo)準(zhǔn)妈经，通過(guò)首頁(yè)選擇對(duì)應(yīng)的性別、類(lèi)別和年齡捧书。',
????????????},
????????????{
????????????????id:?2,
????????????????url:?'a589',
????????????????title:?'【單項(xiàng)成績(jī)】頁(yè)包含了詳細(xì)的單項(xiàng)打分情況及成績(jī)雷達(dá)圖吹泡，直觀地看出自己的弱項(xiàng)和強(qiáng)項(xiàng)。',
????????????},
????????????{
????????????????id:?3,
????????????????url:?'a1231231',
????????????????title:?'【總結(jié)】頁(yè)包含了詳細(xì)的單項(xiàng)打分情況及成績(jī)雷達(dá)圖经瓷，直觀地看出自己的弱項(xiàng)和強(qiáng)項(xiàng)爆哑。',
????????????},
????????],
????????indicatorDots:?true,
????????vertical:?false,
????????autoplay:?false,
????????interval:?2000,
????????duration:?500
????}
})
效果如下：
