微信小程序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
    })
    }
复制代码

转载于:https://juejin.im/post/5aa22109518825555c1d3b9f