在小程式中的swiper 標籤，會有一個自己固定的高度150px，但是我們實際上希望這個輪播圖的高度可以動態改變，不然在不同的設備上都是150px 的高度，會出現樣式的問題。本篇文章就來跟大家介紹這個高度問題的解決方法，希望對大家有幫助！
1、概述
# 小程式為輪播圖標籤設定了固定的高度150px ，這個樣式在大螢幕的裝置上看起來並不是很明顯，但是如果換成了 iphone5 這種小螢幕的機型的話，圖片的高度並不會達到150px。因為我給圖片設定的 mode 為 widthFix，讓圖片的高度根據寬度來自於適應。所以要解決的問題就是讓輪播圖的高度跟著圖片的高度來改變。
2、解決
#1）、給swiper 設定一個行內樣式，height 綁定一個動態的數據，並且給內部image 標籤設置一個id="swiper-image"；並且image 標籤有一個事件：bindload，這個事件是當圖片加載完成之後才會觸發的，並且把這個事件綁定為圖片
官網文件：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
注意：這裡為什麼我不在onLoad 生命週期中去獲取image 圖片的高度，這是因為onLoad 中去使用些方法獲取圖片信息的話，只能從本地的圖片中去獲取到準確的信息，但是從網絡上請求下來的圖片，當元件載入完後可能圖片都沒請求到，那麼就無法取得具體的數據，所以使用image 自帶的bindload 事件去獲取其具體的信息
wx.createSelectorQuery()，建立節點選擇器後，呼叫query.select('#swiper-image'). boundingClientRect().exec((res) => {}) 方法，取得該圖片的具體資訊。最後將取得到的該圖片的蓋度設定給swiperHeight，這樣就動態綁定為了swiper 標籤，頁面樣式顯示也就正常了
3、優化
1）、這裡因為我請求的圖片一共有十幾張，那麼該方法就會被調用十幾次，所以自己在寫個防手震函數來解決這個問題就好。我在根目錄下的until.js 目錄中，新建一個hook.js 文件，用來存放我封裝的js 功能函數，在這裡面編寫防抖函數並且導出
小程式開發教程】
以上是總結分享小程式中 swiper 輪播圖高度問題的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
