情境說明

眾所周知,在微信小程式swiper元件中需要使用定高來使swiper-item中的內容得到展現，否則就會出現內容無法顯示或者顯示不全的問題。這個問題在頁面分頁載入時顯得尤為棘手，由於大多數內容基本為列表輸出的內容具有一定的規律性，通常的解決方式是獲取資料陣列長度，根據資料長度來動態改變每頁的長度，但是每種機型的尺寸不一，而微信使用的是rpx,每種機型高度不一,dpr也不一樣，比如iPhone6為375x667:DP2，而iPhone6 Plus 則為414X736:DPR3，因此會導致留白高度不一。所以，此種方式不可取。

解決方案

使用Swiper+scroll-view可以完美解決這個問題，以下一步步拆解:

1.獲取裝置的可視視窗高度。

  var that=this
  wx.getSystemInfo({
      success: function (res) {
        that.setData({
          clientHeight: res.windowHeight
        });
      }
    });
複製程式碼

2.設定swiper高度

<swiper style="height: {{clientHeight?clientHeight+'px':'auto'}}" class='videoSwiper'  current="{{currentTab}}"  duration="200" bindchange="swiperchange"></swiper>
複製程式碼

3.在swiper-item中巢狀一個scroll-view

<swiper-item >
     <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">
     </scroll-view>
</swiper-item >
複製程式碼

4.其他js程式碼

  swiperchange: function (e) {
    var that = this
    console.log(e.detail.current)
    that.setData({
      'currentTab': e.detail.current
    })
    }
複製程式碼