小程序Swiper高度自適應

微信小程序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高度 複製代碼 3.在swiper-item中嵌套一個scroll-view 複製代碼 4.其餘js代碼 swiperchange: function (e) { var that = this console.log(e.detail.current) that.setData({ 'currentTab': e.detail.current }) }