小程序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 }) }