


Fassen Sie die L?sung des H?henproblems des Swiper-Karussells im Sharing-Applet zusammen
Feb 09, 2022 am 10:36 AMDas 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()
,創(chuàng)建節(jié)點選擇器后,調(diào)用 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
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!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mit der Popularit?t mobiler Internettechnologie und Smartphones ist WeChat zu einer unverzichtbaren Anwendung im Leben der Menschen geworden. Mit WeChat-Miniprogrammen k?nnen Benutzer Miniprogramme direkt verwenden, um einige einfache Anforderungen zu erfüllen, ohne Anwendungen herunterladen und installieren zu müssen. In diesem Artikel wird erl?utert, wie Sie mit Python ein WeChat-Applet entwickeln. 1. Vorbereitung Bevor Sie Python zum Entwickeln des WeChat-Applets verwenden, müssen Sie die entsprechende Python-Bibliothek installieren. Hier empfiehlt es sich, die beiden Bibliotheken wxpy und itchat zu verwenden. wxpy ist eine WeChat-Maschine

Implementieren von Kartenumdreheffekten in WeChat-Miniprogrammen In WeChat-Miniprogrammen ist die Implementierung von Kartenumdreheffekten ein h?ufiger Animationseffekt, der die Benutzererfahrung und die Attraktivit?t von Schnittstelleninteraktionen verbessern kann. Im Folgenden wird detailliert beschrieben, wie der Kartenumdrehungseffekt im WeChat-Applet implementiert wird, und relevante Codebeispiele bereitgestellt. Zun?chst müssen Sie in der Seitenlayoutdatei des Miniprogramms zwei Kartenelemente definieren, eines für die Anzeige des vorderen Inhalts und eines für die Anzeige des hinteren Inhalts. Der spezifische Beispielcode lautet wie folgt: <!--index.wxml-. ->&l

Laut Nachrichten dieser Website vom 31. Oktober und 27. Mai dieses Jahres kündigte die Ant Group den Start des ?Chinese Character Picking Project“ an und leitete kürzlich neue Fortschritte ein: Alipay startete das Miniprogramm ?Chinese Character Picking – Uncommon Characters“. um Sammlungen der Gesellschaft zu sammeln. Seltene Charaktere erg?nzen die Bibliothek seltener Charaktere und bieten unterschiedliche Eingabeerlebnisse für seltene Charaktere, um die Eingabemethode für seltene Charaktere in Alipay zu verbessern. Derzeit k?nnen Benutzer das Applet ?Ungew?hnliche Zeichen“ aufrufen, indem sie nach Schlüsselw?rtern wie ?Aufnehmen chinesischer Zeichen“ und ?Seltene Zeichen“ suchen. Im Miniprogramm k?nnen Benutzer Bilder von seltenen Zeichen einreichen, die vom System nicht erkannt und eingegeben wurden. Nach der Best?tigung nehmen Alipay-Ingenieure zus?tzliche Eintr?ge in die Schriftartenbibliothek vor. Auf dieser Website wurde festgestellt, dass Benutzer im Miniprogramm auch die neueste Eingabemethode zur Wortteilung nutzen k?nnen. Diese Eingabemethode ist für seltene W?rter mit unklarer Aussprache konzipiert. Demontage durch den Benutzer

Miniprogramme k?nnen React verwenden. 1. Implementieren Sie einen Renderer basierend auf ?React-Reconciler“ und generieren Sie eine Miniprogrammkomponente zum Parsen und Rendern von DSL. 3. Installieren Sie npm und führen Sie den Entwickler-Build aus npm im Tool; 4. Führen Sie das Paket auf Ihrer eigenen Seite ein und verwenden Sie dann die API, um die Entwicklung abzuschlie?en.

Wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, erfordert spezifische Codebeispiele. Mit der Entwicklung des mobilen Internets und der Popularit?t von Smartphones sind Miniprogramme und H5 zu unverzichtbaren Anwendungsformen geworden. Als plattformübergreifendes Entwicklungsframework kann Uniapp die Konvertierung zwischen kleinen Programmen und H5 basierend auf einer Reihe von Codes schnell realisieren und so die Entwicklungseffizienz erheblich verbessern. In diesem Artikel wird vorgestellt, wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, und es werden konkrete Codebeispiele gegeben. 1. Einführung in uniapp unia

Dieser Artikel bringt Ihnen einige verwandte Themen zu WeChat-Miniprogrammen. Er stellt vor allem die Verwendung ?ffentlicher Kontovorlagennachrichten in Miniprogrammen vor. Ich hoffe, dass er für alle hilfreich ist.

Implementierungsidee x01 Servereinrichtung Zun?chst wird auf der Serverseite ein Socket zum Empfangen von Nachrichten verwendet. Jedes Mal, wenn eine Socket-Anfrage angenommen wird, wird ein neuer Thread ge?ffnet, um die Verteilung und Annahme von Nachrichten zu verwalten Um alle Threads zu verwalten und damit die Verarbeitung verschiedener Funktionen des Chatrooms zu realisieren, ist die Einrichtung des x02-Clients viel einfacher als die des Servers. Die Funktion des Clients besteht lediglich darin, Nachrichten zu senden und zu empfangen und bestimmte Zeichen einzugeben Um die Verwendung unterschiedlicher Funktionen zu erreichen, müssen Sie daher auf der Clientseite nur zwei Threads verwenden, einen für den Empfang von Nachrichten und einen für das Senden von Nachrichten liegt daran, nur

Geolocation-Positionierung und Kartenanzeige von PHP und Miniprogrammen Geolocation-Positionierung und Kartenanzeige sind zu einer der notwendigen Funktionen in der modernen Technologie geworden. Mit der Beliebtheit mobiler Ger?te steigt auch der Bedarf der Menschen an Ortung und Kartendarstellung. W?hrend des Entwicklungsprozesses sind PHP und Applets zwei g?ngige Technologien. In diesem Artikel werden Sie in die Implementierungsmethode der geografischen Standortpositionierung und Kartenanzeige in PHP und Miniprogrammen eingeführt und entsprechende Codebeispiele angeh?ngt. 1. Geolokalisierung in PHP In PHP k?nnen wir die Geolokalisierung von Drittanbietern verwenden
