So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider

In diesem Artikel wird hauptsächlich beschrieben, wie ein Anzeigefeld im Schiebereglerstil basierend auf vorhandenen Komponenten (z. B. dem Swiper des WeChat-Applets und swiper.js, das wir normalerweise in h5 verwenden) implementiert wird. Die Demo basiert auf einem Miniprogramm, die Logik ist jedoch universell.

Hintergrund

Ich arbeite gerade an einem neuen Miniprogramm. Auf der Homepage gibt es ein Swiper-Modul. Dank der hervorragenden Arbeit meiner Design-Klassenkameraden 😭 habe ich etwas Freude an der langweiligen Entwicklung gefunden. Sie haben die Punkte im Anzeigefeld des Wischers in einen Schieberegler geändert. Mal ehrlich, wäre es nicht schön, sie einfach in eine Reihe zu setzen und anzuklicken? Hahahaha. Aber ich liebe ihn~

Zieleffekt

Insgesamt ist es einfach. Vor allem der Schieberegler unten muss noch etwas überarbeitet werden. Nach dem Sortieren der Anforderungen müssen folgende Funktionspunkte implementiert werden:

• Der Schieber muss einen natürlichen Gleiteffekt haben.
• Der Schieber muss in Schieberichtung gleiten.

Ideen

Nach der Sortierung sieht der Umsetzungsplan wie folgt aus:

• Wenn wir den Inhalt des Swipers verschieben, können wir die curPage der aktuellen Seite abrufen (normalerweise stellt die Komponente die aktuelle Seite bereit) und dann können wir die prePage der vorherigen Seite festlegen, nachdem das Verschieben abgeschlossen ist. Diese prePage ist tatsächlich die curPage dieses Mal. Über diese Seite können wir die Start- und Endposition des Schiebereglers abrufen.
• Das Gleiten kann durch Transformieren erreicht werden.
• Da „Transform“ verwendet wird, muss das Applet benutzerdefinierte Stile unterstützen. Derzeit stellt das Applet jedoch eine Reihe von this.animate-Methoden bereit.

erreichen

swiper hört auf Änderungen

Zuerst müssen wir das Änderungsereignis des Swipers verwenden. Der Code lautet wie folgt:

<Swiper
 Klasse = "Hot-Content-Swiper"
 Indikatorpunkte = "{{Indikatorpunkte}}"
 vertikal="{{vertikal}}"
 bindchange="sliderHandler">
 <block wx:für="{{popular_zone_list}}" wx:key="*dies">
   <Swiper-Element>
     <Klasse anzeigen="Hotlist">
       Das ist Swiper{{index}}
     </Ansicht>
   </swiper-item>
 </block>
</swiper>

Benutzerdefiniertes Punktmodul

Zweitens müssen wir den DOM von dot anpassen, also unseren Slider-Bereich. Der Code lautet wie folgt:

<Ansichtsklasse="Punkt">
 <view class="dot-bar" style="width: {{dotBarWidth}}rpx"></view>
</Ansicht>

Dazu muss unserem Schieberegler eine Anfangsgröße zugewiesen werden, da es sonst nach dem Verschieben zu einem Zittern bei der Breitenänderung kommt, nämlich der dotBarWidth.

Die Größe des Sliders berechnet sich aus der Länge des Slides und der Anzahl der Swiper-Items. Nachdem wir die Breite auf diese Weise ermittelt haben, müssen wir sie nur noch um ein Vielfaches der Schiebereglerbreite versetzen.

sei Punktbreite = 100;
let dotBarWidth = Math.round(dotWidth/popular_zone_list.length);

Logik im Änderungsereignis

Die Vorlage wurde geschrieben, also beginnen wir mit dem Schreiben des Änderungsereignisses. Der Code lautet wie folgt:

SchiebereglerHandler({detail}) {
 sei curPage = detail.current;
 lass self = dies;
 dies.animieren('.dot-bar', [
   {
     translateX: self.prePage * 100 + '%',
     transformOrigin: "Mitte",
   },
   {
     translateX: aktuelleSeite*100 + '%',
     transformOrigin: "Mitte",
   },
 ], 100, Funktion () { // Rückruf animieren self.prePage = curPage;
   selbst.clearAnimation('.container', {
     übersetzenX: wahr,
     transformOrigin: wahr
   });
 });
},
// Wenn es kein Miniprogramm ist, kann this.animate durch einen dynamisch gebundenen Stil oder andere DOM-Operationen ersetzt werden.

Finden Sie nicht, dass diese Funktion, nachdem sie implementiert wurde, sehr einfach und ziemlich gut ist? 😒

Abschließende Gedanken

Ehrlich gesagt habe ich während des Implementierungsprozesses einige dumme Dinge getan, die möglicherweise mit meinem damaligen Zustand zusammenhingen. Ich war zu sehr darauf konzentriert, zu beurteilen, ob der Schieberegler nach links oder rechts geschoben wurde, was zu einem Umweg führte. Basierend auf den Ergebnissen stellten wir jedoch fest, dass wir nur die Start- und Endpositionen berechnen müssen und die Startposition des Wischs nach links größer als die Endposition sein muss. Ich hoffe, das obige Schema kann Ihnen als Referenz dienen~🎉

Dies ist das Ende dieses Artikels zum Ändern des Punkts im WeChat-Miniprogramm „Swiper-dot“ in einen Schieberegler. Weitere relevante Inhalte zum Ändern des Punkts im WeChat-Miniprogramm „Swiper-dot“ in einen Schieberegler finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM in Zukunft unterstützen!