微信小程式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 }) }