解决!小程序swiper组件的高度适应问题

众所周知,swiper组件的元素swiper-item是设置了绝对定位的,所以里面的内容是无法撑开swiper的,并且给swiper盒子设置overflow:visible也是没有用的,有几种解决方法,根据不同的需求使用。

  1. 给swiper-item里的内容加scaoll-view包装;
  2. 通过微信api,直接选取有实际内容的DOM,并获取到他的高度,动态设置swiper的高度

wx.createSelectorQuery();

 

示例代码

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

你可能感兴趣的:(解决!小程序swiper组件的高度适应问题)