微信小程序Swiper高度自適應

情境說明

衆所周知,在微信小程序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
    })
    }
複製代碼