Detaillierte Erklärung der benutzerdefinierten Swiper-Komponente in JavaScript

Effektanzeige

Komponenteneinstellungen

Schritt 1

Erstellen Sie im Seitenverzeichnis einen neuen Ordner „components“.

Schritt 2

Erstellen Sie einen neuen Ordner-Swiper unter Komponenten

Erstellen Sie im Swiper-Verzeichnis 4 neue Dateien, und zwar

• Wischer.
• Abonnieren
• jsonswiper.wxml
• swiper.wxss

Das Standortdiagramm jeder Datei ist wie folgt:

Hinweis: Zu diesem Zeitpunkt wird bei der Kompilierung ein Fehler gemeldet. Der Fehler wird in JSON angezeigt. Machen Sie sich darüber keine Sorgen. Kopieren Sie den Code, fügen Sie ihn später ein und kompilieren Sie ihn.

Schritt 3

Kopieren Sie den folgenden Code in die vier Dateien im Swiper-Verzeichnis.

swiper.js

swiper.json

swiper.wxml

swiper.wxss

Verwenden von Komponenten

Schritt 1

Fügen Sie die Komponente in die JSON-Datei der Seite ein, auf der die Swiper-Komponente benötigt wird

{
  "Komponenten verwenden": {
    "custom-swiper": "../Komponenten/Swiper/Swiper"
  }
}

Hinweis: …/components/swiper/swiper gibt die Position der Komponente an. Sie können sie entsprechend der tatsächlich festgelegten Positionsbeziehung ersetzen.

Schritt 2

Verwenden Sie auf der WXML-Seite der Seite den Komponentencode

<custom-swiper imgUrls="{{carouselImgUrls}}" />

KarussellBildURLs

Typ: Array Zweck: Wird verwendet, um die Adresse des Diashow-Bildes zu speichern (Netzwerkadresse oder lokale Adresse)

Schritt 3

Fügen Sie in den Daten der js-Datei der Seite die Variable carouselImgUrls hinzu

  Daten: {
    Karussell-Bild-URLs: [
    /*
    Die Anzahl der Bilder ist individuell anpassbar. Bildquelle: Weibo Autor: Girl Rabbit iiilass ​ ​​​​
 	Rechtsverletzung und Löschung */
      „https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpg“,
      „https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg“,
      „https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg“,
      „https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg“,
      „https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg“
    ],
  },

Schließlich müssen Sie nur noch den Code kompilieren, um das Effektdiagramm zu erhalten

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!