微信小程序?qū)崿F(xiàn)上下滾動(dòng)消息提醒，主要是利用swiper組件來實(shí)現(xiàn)肛跌，swiper組件在小程序中是滑塊視圖容器唉侄。
通過vertical屬性（默認(rèn)為false,實(shí)現(xiàn)默認(rèn)左右滾動(dòng)）設(shè)置為true來實(shí)現(xiàn)上下滾動(dòng)。
只要你的swiper存在vertical屬性糊闽，無論你給值為true或者false或者不設(shè)參數(shù)值啥箭，都將實(shí)現(xiàn)上下滾動(dòng)
-
效果圖
左右滾動(dòng) wxml code
<!-- 公告 -->
<view class='adsec'>
<icon class='iconfont icongonggao c_main fs_36'></icon>
<text class='c_main fs_26'>公告：</text>
<swiper class="swiper_container" autoplay="true" circular="true" interval="2000">
<block wx:for="{{msgList}}">
<navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">
<swiper-item>
<view class="swiper_item">{{item.title}}</view>
</swiper-item>
</navigator>
</block>
</swiper>
</view>
<!-- 公告 end -->
- wxs code
.adsec{
width: 90%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin: 10rpx auto;
background:rgba(254,242,242,1);
border-radius:6px;
padding: 7rpx 10rpx;
height: 50rpx;
}
.adsec icon{
display: flex;
margin-right: 10rpx;
}
.swiper_container {
height: 55rpx;
width: 80%;
line-height: 55rpx;
padding-left: 10rpx;
}
.swiper_item {
font-size: 25rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 2px;
}
- js
msgList: [
{ url: "url", title: "恭喜xxx完成任務(wù)退回200進(jìn)入領(lǐng)獎(jiǎng)區(qū)" },
{ url: "url", title: "恭喜xxx獲得XXX獎(jiǎng)勵(lì)" },
{ url: "url", title: "恭喜xxx完成任務(wù)退回300進(jìn)入領(lǐng)獎(jiǎng)區(qū)" }]
OK谍珊，完成
