微信小程序公告滚动通知
微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。
通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。
只要你的swiper存在vertical属性，无论你给值为true或者false或者不设参数值，都将实现上下滚动
-
效果图
左右滚动 -
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完成任务退回200进入领奖区" },
{ url: "url", title: "恭喜xxx获得XXX奖励" },
{ url: "url", title: "恭喜xxx完成任务退回300进入领奖区" }]
来源：https://www.jianshu.com/p/71502ae00d5c
请发表评论