微信小程序公告滾動通知

微信小程序實現上下滾動消息提醒，主要是利用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