搜索了一堆小程序公告实现都不完善，要么卡顿，要么实现复杂，关键一点是很多都过度处理了。所以我用了个小技巧，用swiper实现。
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: '【评分标准】页可以查看不同年龄段的评分标准，通过首页选择对应的性别、类别和年龄。',
},
{
id: 2,
url: 'a589',
title: '【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。',
},
{
id: 3,
url: 'a1231231',
title: '【总结】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。',
},
],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500
}
})
效果如下：
