小程序公告消息（滾動消息）

這次我主要想總結一下微信小程序實現上下滾動消息提醒，主要是利用swiper組件來實現，swiper組件在小程序中是滑塊視圖容器。

我們通過vertical屬性（默認為false,實現默認左右滾動）設置為true來實現上下滾動。

（需要注意的是：只要你的swiper存在vertical屬性，無論你給值為true或者false或者不設參數值，都將實現上下滾動）

 

wxml

  <swiper class="swiper_container_notice swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
    <block wx:for="{{msgList}}" wx:if="{{item.id}}">
        <swiper-item bindtap="messageDetails"  data-id="{{item.id}}" class="swiper_notice swiper">
          <image class="van-notice-bar__left-icon_notice" src="/assets/images/message.png"></image>
          <view class="swiper_item_notice swiper_item" data-id="{{item.id}}">{{item.title}}</view>
        </swiper-item>
    </block>
  </swiper>
</view>

js

  messageDetails(e){
      wx.navigateTo({
        url: '/pages/setting/protocol/splAgreement/index'     
        })
 
  },

var app = getApp()
Page({
  data: {
  },
  onLoad(e) {
    console.log(e.title)
    this.setData({
      msgList: [
        { url: "url", title: "公告：多地首套房貸利率上浮 熱點城市漸迎零折扣時代" },
        { url: "url", title: "公告：悅如公寓三周年生日趴邀你免費吃喝歡唱" },
        { url: "url", title: "公告：你想和一群有志青年一起過生日嘛？" }]
    });
  }
})

wxss

.swiper_container {
  height: 55rpx;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
}
.swiper_item_notice {
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}
.swiper_notice{
  display: flex !important;
  align-items: center !important;
  padding-left: 20rpx !important;
}
.swiper_notice image{
  width: 35rpx;
  height: 35rpx;
  margin-right:10rpx;
  margin-right: 40rpx;
}

 

從輪播頁面切換到其他頁面，在跳轉回來的時候，會涉及到不更新swiper導致不顯示或顯示問題的解決辦法

添加  current="{{current}}"

 <swiper current="{{current}}" class="swiper_container_notice swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
    <block wx:for="{{msgList}}" wx:if="{{item.id}}">
        <swiper-item current="{{current}}" bindtap="messageDetails"  data-id="{{item.id}}" class="swiper_notice swiper">
          <image class="van-notice-bar__left-icon_notice" src="/assets/images/message.png"></image>
          <view class="swiper_item_notice swiper_item" data-id="{{item.id}}">{{item.title}}</view>
        </swiper-item>
    </block>
  </swiper>

js current設置為0

 data: {
    current:0,
}
  
獲取輪播數據
 this.setData({
          msgList:[res]
        },()=>{
          this.setData({
            current: 0
          })
        })