微信小程序——動態設置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高度的方法了。如果您有更好的處理方法，望不吝賜教哈~~~