Fassen Sie die Lösung des Höhenproblems des Swiper-Karussells im Sharing-Applet zusammen

Das Swiper-Tag im Mini-Programm hat eine eigene feste Höhe von 150 Pixel, aber wir hoffen tatsächlich, dass die Höhe dieses Karussells dynamisch geändert werden kann. Andernfalls ist es auf verschiedenen Geräten immer 150 Pixel hoch und es wird Stil geben Probleme. Dieser Artikel stellt Ihnen die Lösung für dieses Höhenproblem vor. Ich hoffe, er wird Ihnen helfen!

1. Übersicht

Das Applet legt eine feste Höhe von 150 Pixeln für das Karusselletikett fest. Auf einem Großbildgerät sieht dieser Stil nicht sehr offensichtlich aus, aber wenn er durch ein iPhone5 ersetzt wird Bei einem so kleinen Bildschirmmodell erreicht die Bildhöhe nicht 150 Pixel. Da ich für das Bild den Modus widthFix eingestellt habe, passt sich die Höhe des Bildes entsprechend der Breite an. Das zu lösende Problem besteht also darin, die Höhe des Karussells mit der Höhe des Bildes zu ändern.

2. Lösen Sie

1) Legen Sie einen Inline-Stil für Swiper fest, binden Sie die Höhe an dynamische Daten und legen Sie dort eine ID = „Swiper-Image“ fest ist ein Ereignis: bindload. Dieses Ereignis wird ausgelöst, wenn das Bild geladen wird, und dieses Ereignis ist an das Bild gebunden. Offizielle Website-Dokumentation: https://developers.weixin.qq.com/miniprogram/dev/component /image.html

Hinweis: Warum erhalte ich die Höhe des Bildes nicht im onLoad-Lebenszyklus? Dies liegt daran, dass Sie die Bildinformationen nur aus dem lokalen Bild abrufen können, wenn Sie in onLoad einige Methoden verwenden. Genaue Informationen, aber bei aus dem Internet angeforderten Bildern wird das Bild nach dem Laden der Komponente möglicherweise nicht angefordert, sodass die spezifischen Daten nicht abgerufen werden können. Verwenden Sie daher das mit dem Bild gelieferte Bindload-Ereignis, um dessen spezifische Informationen abzurufen

2), deklarieren Sie eine Variable swiperHeight in den Daten in der Datei index.js, um die Höhe der Swiper-Beschriftung zu speichern

3) und schreiben Sie dann die an das Bild gebundene Bindload-Ereignishandlerfunktion handleSwiperImageLoaded, Mithilfe der kleinen
-Methode des Programms werden die spezifischen Informationen des Bildes abgerufen. Stellen Sie abschließend die Abdeckung des erhaltenen Bildes auf swiperHeight ein, sodass es dynamisch an das swiper-Tag gebunden ist und die Seitenstilanzeige normal ist ) Da meine Anfrage mehr als ein Dutzend Bilder enthält, wird diese Methode mehr als zehn Mal aufgerufen. Daher muss ich nur eine Anti-Shake-Funktion schreiben, um dieses Problem zu lösen. Ich erstelle eine neue Hook.js-Datei im Verzeichnis Until.js im Stammverzeichnis, um meine gekapselte JS-Funktion darin zu speichern und sie (

wx.createSelectorQuery()，创建节点选择器后，调用 query.select('#swiper-image').boundingClientRect().exec((res) => {})

2) in den Home-Index zu exportieren .js im Musikverzeichnis führt die gekapselte Anti-Shake-Funktion ein

【Verwandte Lernempfehlungen:

Mini-Tutorial zur Programmentwicklung】

Das obige ist der detaillierte Inhalt vonFassen Sie die Lösung des Höhenproblems des Swiper-Karussells im Sharing-Applet zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!