總結分享小程式中 swiper 輪播圖高度問題的解決方法

在小程式中的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 事件去獲取其具體的信息

##2）、在index.js 檔案中的data 中宣告一個變數swiperHeight，來儲存swiper 標籤的高度

3）、然後書寫image 綁定的bindload 事件處理函數handleSwiperImageLoaded，使用小程式的

wx.createSelectorQuery()，建立節點選擇器後，呼叫query.select('#swiper-image'). boundingClientRect().exec((res) => {}) 方法，取得該圖片的具體資訊。最後將取得到的該圖片的蓋度設定給swiperHeight，這樣就動態綁定為了swiper 標籤，頁面樣式顯示也就正常了

3、優化

1）、這裡因為我請求的圖片一共有十幾張，那麼該方法就會被調用十幾次，所以自己在寫個防手震函數來解決這個問題就好。我在根目錄下的until.js 目錄中，新建一個hook.js 文件，用來存放我封裝的js 功能函數，在這裡面編寫防抖函數並且導出

2）、在home-music 目錄下的index.js 引入封裝的防手震函數

3）、在handleSwiperImageLoaded 方法中使用防手震函數即可，這下只有載入完最後一張圖片才會觸發該方法

#【相關學習推薦：

小程式開發教程】

以上是總結分享小程式中 swiper 輪播圖高度問題的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！