微信小程式 動態設定swiper的高度

根據小程式的設定，swiper元件預設高度為150px，無法根據內容來撐高。如果裡面的內容固定還好說，直接設定乙個高度就可以了。要是裡面內容是動態變化的，這個特性使得我們使用這個元件的時候感到諸多不便。

舉個例子：

如下這種情況，如果我們不給它設定乙個高度，那麼它只會在那個150px區域性進行滾動了。

那麼我們如何動態改變它的高度呢？

原理：獲取1條資料的高度*資料的條數。

js**如下：

const query =wx.createselectorquery()

query.select('.class-item').boundingclientrect() 
query.exec(function
(res) )
})

不太了解的可看下官方文件說明。

data.t是ajax請求返回的結果。

class-item為單條資料的class，如下圖：

返回結果如下：

wxml中賦值：

wxml**截圖如下：

class-item}裡面的}是為了給每條資料不同的class

定義乙個返回高度的方法：

get_wxml(classname, callback) ,

let planitemselect = '';

for(let i=0;i//
data.t是ajax請求返回的資料
planitemselect += `.class-list-block$ .class-item$,` //
_this.data.status表示當前是第幾個swiper-item
}let sumheigth = 0_this.get_wxml(planitemselect, (res) =>
_this.setdata()
}) 

微信小程式把玩（十）swiper元件

原文 android寫過輪播圖的痛楚只有寫過的知道，相對還是比較麻煩的，並沒有乙個輪播圖元件，有個viewpage也需要自己定製，ios則多用uiscrollerview去實現，這個swiper封裝的相對還是方便的，使用方式也相對那倆容易些。主要屬性 屬性只需要設定就行了 也可以抽到js檔案的dat...

微信小程式中的swiper元件詳解

微信小程式中的swiper元件 微信小程式中的swiper元件真的是簡單方便 提供了頁面中文字等滑動的效果 這裡的就是乙個滑塊檢視容器 而就是你希望滑動的東西，可以是文字也可以是image 其中swiper有很多屬性。常用的有 更多的屬性可以去檢視微信小程式官方教程 這裡vertical true ...

微信小程式swiper元件滑動卡死現象解決

專案中用swiper作為滑動展示展品頁面，swiper item高達49個 在使用過程中出現了滑動卡死的現象，解決方案如下 在swiper裡面監聽bindanimationfinish事件 bindanimationfinish在swiper卡死的時候也會觸發 神奇 function changeg...