微信小程序——动态设置swiper的高度

根据小程序的设定，swiper组件默认高度为150px，无法根据内容来撑高。如果里面的内容固定还好说，直接设置一个高度就可以了。要是里面内容是动态变化的，这个特性使得我们使用这个组件的时候感到诸多不便。

举个例子：

如下这种情况，如果我们不给它设置一个高度，那么它只会在那个150px局部进行滚动了。

那么我们如何动态改变它的高度呢？

情况1：数据每条高度都是一样

原理：获取1条数据的高度*数据的条数。

js代码如下：

const query = wx.createSelectorQuery()
query.select('.class-item').boundingClientRect() 
query.exec(function (res) {
  console.log(res)
  console.log(res[0].height) 
  console.log(res[0].height * data.t.length) 
  let sumHeigth = res[0].height * data.t.length;
  _this.setData({
    swiperHeight: sumHeigth
  })
})

对于 wx..createSelectorQuery() 不太了解的可看下官方文档说明。

 

data.t是ajax请求返回的结果。

 

class-item为单条数据的class，如下图：

 

返回结果如下：

wxml中赋值：

情况2：数据每条高度不一致

原理：给每条数据一个不同的class,再通过微信的selectAll返回每条的数据的高度，把这些高度相加就是整个swiper的高度了。

wxml代码截图如下：

class-item{{index}}里面的{{index}}是为了给每条数据不同的class

定义一个返回高度的方法：

get_wxml(className, callback) {      
  wx.createSelectorQuery().selectAll(className).boundingClientRect().exec(callback)
},

js代码如下： 

let planItemSelect = '';
for(let i=0;i<data.t.length;i++){ //data.t是ajax请求返回的数据
  planItemSelect += `.class-list-block${_this.data.status} .class-item${i},` //_this.data.status表示当前是第几个swiper-item
}

let sumHeigth = 0   
_this.get_wxml(planItemSelect, (res) => {
  for (let i = 0; i < res[0].length; i++) {
    sumHeigth += res[0][i].height //获取每条数据的高度并相加
  }
  _this.setData({
    swiperHeight: sumHeigth
  })
})     

最后赋值跟情况1最后一步是一样的了。

以上就是我动态获取swiper高度的方法了。如果您有更好的处理方法，望不吝赐教哈~~~