在小程式中的swiper 標籤，會有一個自己固定的高度150px，但是我們實際上希望這個輪播圖的高度可以動態(tài)改變，不然在不同的設(shè)備上都是150px 的高度，會出現(xiàn)樣式的問題。本篇文章就來跟大家介紹這個高度問題的解決方法，希望對大家有幫助！
1、概述
#???????小程式為輪播圖標籤設(shè)定了固定的高度150px ，這個樣式在大螢?zāi)坏难b置上看起來並不是很明顯，但是如果換成了?iphone5 這種小螢?zāi)坏臋C型的話，圖片的高度並不會達到150px。因為我給圖片設(shè)定的 mode 為 widthFix，讓圖片的高度根據(jù)寬度來自於適應(yīng)。所以要解決的問題就是讓輪播圖的高度跟著圖片的高度來改變。
2、解決
#1）、給swiper 設(shè)定一個行內(nèi)樣式，height 綁定一個動態(tài)的數(shù)據(jù)，並且給內(nèi)部image 標籤設(shè)置一個id="swiper-image"；並且image 標籤有一個事件：bindload，這個事件是當圖片加載完成之後才會觸發(fā)的，並且把這個事件綁定為圖片
官網(wǎng)文件：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
注意：這裡為什麼我不在onLoad 生命週期中去獲取image 圖片的高度，這是因為onLoad 中去使用些方法獲取圖片信息的話，只能從本地的圖片中去獲取到準確的信息，但是從網(wǎng)絡(luò)上請求下來的圖片，當元件載入完後可能圖片都沒請求到，那麼就無法取得具體的數(shù)據(jù)，所以使用image 自帶的bindload 事件去獲取其具體的信息
wx.createSelectorQuery()，建立節(jié)點選擇器後，呼叫query.select('#swiper-image'). boundingClientRect().exec((res) => {}) 方法，取得該圖片的具體資訊。最後將取得到的該圖片的蓋度設(shè)定給swiperHeight，這樣就動態(tài)綁定為了swiper 標籤，頁面樣式顯示也就正常了
3、優(yōu)化
1）、這裡因為我請求的圖片一共有十幾張，那麼該方法就會被調(diào)用十幾次，所以自己在寫個防手震函數(shù)來解決這個問題就好。我在根目錄下的until.js 目錄中，新建一個hook.js 文件，用來存放我封裝的js 功能函數(shù)，在這裡面編寫防抖函數(shù)並且導出
小程式開發(fā)教程】
以上是總結(jié)分享小程式中 swiper 輪播圖高度問題的解決方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用Python開發(fā)微信小程式
Jun 17, 2023 pm 06:34 PM
隨著行動互聯(lián)網(wǎng)技術(shù)和智慧型手機的普及，微信成為了人們生活中不可或缺的一個應(yīng)用。而微信小程式則讓人們可以在不需要下載安裝應(yīng)用程式的情況下，直接使用小程式來解決一些簡單的需求。本文將介紹如何使用Python來開發(fā)微信小程式。一、準備工作在使用Python開發(fā)微信小程式之前，需要先安裝相關(guān)的Python函式庫。這裡推薦使用wxpy和itchat這兩個函式庫。 wxpy是一個微信機器
實作微信小程式中的卡片翻轉(zhuǎn)特效
Nov 21, 2023 am 10:55 AM
實作微信小程式中的卡片翻轉(zhuǎn)特效在微信小程式中，實現(xiàn)卡片翻轉(zhuǎn)特效是一種常見的動畫效果，可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現(xiàn)卡片翻轉(zhuǎn)的特效，並提供相關(guān)程式碼範例。首先，需要在小程式的頁面佈局檔案中定義兩個卡片元素，一個用於顯示正面內(nèi)容，一個用於顯示背面內(nèi)容，具體範例程式碼如下：<!--index.wxml-->&l
支付寶上線「漢字拾光-生僻字」小程序，用於徵集、補充生僻字庫
Oct 31, 2023 pm 09:25 PM
本站10月31日消息，今年5月27日，螞蟻集團宣布啟動“漢字拾光計劃”，最近又迎來新進展：支付寶上線“漢字拾光-生僻字”小程序，用於向社會徵集生僻字，補充生僻字庫，同時提供不同的生僻字輸入體驗，以幫助完善支付寶內(nèi)的生僻字輸入方法。目前，用戶搜尋「漢字拾光」、「生僻字」等關(guān)鍵字就可以進入「生僻字」小程式。在小程式裡，使用者可以提交尚未被系統(tǒng)辨識輸入的生僻字圖片，支付寶工程師確認後，將會對字庫進行補錄入。本站注意到，使用者也可以在小程式體驗最新的拆字輸入法，這項輸入法針對讀音不明確的生僻字設(shè)計。用戶拆
小程式能用react嗎
Dec 29, 2022 am 11:06 AM
小程式能用react，其使用方法：1、基於「react-reconciler」實作一個渲染器，產(chǎn)生一個DSL；2、建立一個小程式元件，去解析和渲染DSL；3、安裝npm，並執(zhí)行開發(fā)者工具中的建構(gòu)npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。
uniapp如何實現(xiàn)小程式和H5的快速轉(zhuǎn)換
Oct 20, 2023 pm 02:12 PM
uniapp如何實現(xiàn)小程式和H5的快速轉(zhuǎn)換，需要具體程式碼範例近年來，隨著行動網(wǎng)路的發(fā)展和智慧型手機的普及，小程式和H5成為了不可或缺的應(yīng)用形式。而uniapp作為一個跨平臺的開發(fā)框架，可以在一套程式碼的基礎(chǔ)上，快速實現(xiàn)小程式和H5的轉(zhuǎn)換，大大提高了開發(fā)效率。本文將介紹uniapp如何實現(xiàn)小程式和H5的快速轉(zhuǎn)換，並給出具體的程式碼範例。一、uniapp簡介unia
教你如何在小程式中用公眾號範本訊息（附詳細想法）
Nov 04, 2022 pm 04:53 PM
這篇文章給大家?guī)砹岁P(guān)於微信小程式的相關(guān)問題，其中主要介紹瞭如何在小程式中用公眾號範本訊息，下面一起來看一下，希望對大家有幫助。
用Python編寫簡單的聊天程式教程
May 08, 2023 pm 06:37 PM
實現(xiàn)思路x01服務(wù)端的建立首先,在服務(wù)端,使用socket進行訊息的接受,每接受一個socket的請求,就開啟一個新的線程來管理訊息的分發(fā)與接受,同時,又存在一個handler來管理所有的線程,從而實現(xiàn)對聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務(wù)端簡單多了,客戶端的作用只是對消息的發(fā)送以及接受,以及按照特定的規(guī)則去輸入特定的字符從而實現(xiàn)不同的功能的使用,因此,在客戶端這裡,只需要去使用兩個線程,一個是專門用於接受消息,一個是專門用於發(fā)送消息的至於為什麼不用一個呢,那是因為,只
PHP與小程式的地理位置定位與地圖顯示
Jul 04, 2023 pm 04:01 PM
PHP與小程式的地理位置定位與地圖顯示地理位置定位與地圖顯示在現(xiàn)代科技中已經(jīng)成為了必備的功能之一。隨著行動裝置的普及，人們對於定位和地圖顯示的需求也越來越高。在開發(fā)過程中，PHP和小程式是常見的兩種技術(shù)選擇。本文將為大家介紹PHP與小程式中的地理位置定位與地圖顯示的實作方法，並附上對應(yīng)的程式碼範例。一、PHP中的地理位置定位在PHP中，我們可以使用第三方地理位
