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