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