Beispiel für die Implementierung einer Ankerpositionierungsfunktion beim WeChat-Applet

Vorwort

Bei der Entwicklung kleiner Programme müssen wir häufig durch die Liste scrollen, um sie anzuzeigen. Durch die Verwendung der Ankerpositionierung kann daher eine benutzerfreundlichere interaktive Erfahrung erzielt werden. Schauen wir uns den im Projekt erzielten Effekt an:

Funktionalität

Implementiert mithilfe der Miniprogramm-Ansichtscontainerkomponente: Scroll-View

Dabei ist zu beachten, dass beim vertikalen Scrollen die Scroll-Ansicht eine feste Höhe angeben muss. Schauen wir uns den WXML-Code an:

<scroll-view style="Höhe:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}" class="scroll-warp" scroll-with-animation="{{true}}" bindscroll="handelScroll">
   <block wx:for="{{dataList}}" wx:key="{{index}}">
      <view class="floorType" id="{{item.floor}}">
     </Ansicht>
   </block>
</scroll-ansicht>

Hier wird autoHeight dynamisch basierend auf der Höhe verschiedener Modelle berechnet. Scroll-view hat ein wichtiges Attribut: scroll-into-view, das einen String-Wert erhält, der die Scroll-Position (Ankerpunkt) ist. Dann müssen wir die entsprechende Ankerpunktliste im untergeordneten Knoten von scroll-view festlegen: wie das id-Attribut im Knoten class=floorType in der obigen Abbildung. Auf diese Weise hat unser Scrollen eine Eins-zu-eins-Entsprechung. Klicken Sie auf den Boden im Filterblock, setzen Sie die Variable toView auf die entsprechenden Daten und die Liste wird an die entsprechende Position gescrollt.
Wenn wir durch die Liste scrollen, müssen auch die hervorgehobenen Filterelemente oben entsprechend umgeschaltet werden. Was sollen wir jetzt tun?

Mit dem Bindscroll-Ereignis können wir etwas anfangen: Dieses Ereignis wird ausgelöst, wenn in der Liste gescrollt wird.

Schlüsselcode:

handelScroll(e) {
        let scrollTop=e.detail.scrollTop;
        lass scrollArr = this.data.anchorArray;
        wenn(scrollTop>=scrollArr[scrollArr.length-1]-this.data.autoHeight){
                zurückkehren;
          }anders {
              für (let i=0;i<scrollArr.length;i++){
                    wenn(scrollTop>=0&&scrollTop<scrollArr[0]){
                    // selectFloorIndex steuert die Hervorhebung des Filterblocks this.setData({
                            wähleFloorIndex: 0
                        });
                    }sonst wenn(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {
                        dies.setData({
                            wähleFloorIndex: i
                        });
                 }
             }
         }
    }

Hier ist anchorArray die Summe der Arrays der Seitenhöhe, die von allen Ankerblöcken belegt wird. Anhand eines Bildes ist dies deutlicher zu erkennen:

Jeder Ankerblock hat eine feste Höhe. Nachdem wir die Daten erhalten und die Seite gerendert haben, können wir verwenden
Die Methode boundingClientRect ruft die Höhe jedes Knotens mit dem Klassennamen floorType ab und fügt diese Höhen in das Array anchorArray ein. Wenn wir dann über die Höhe eines bestimmten Ankerpunkts hinaus scrollen, wechselt das oberste Filterelement auch zum nächsten.

Schlüsselcode:

            Lassen Sie die Abfrage = wx.createSelectorQuery().in(this);
            lass HöheArr = [];
            sei h = 0;
            Abfrage.Alles auswählen('.floorType').boundingClientRect((reagieren)=>{
                reagieren.forEach((res) => {
                    h+=Auflösung.Höhe;
                    HöheArr.push(h)
                })
                dies.setData({
                    AnkerArray:HöheArr
                });
            }).exec();

An diesem Punkt ist das Scrollen zur Positionierung des Ankerpunkts abgeschlossen. Ich hoffe, es kann allen helfen. Wenn Sie Fragen haben, können Sie diese gerne mitteilen und uns darauf hinweisen!

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung der Ankerpunktpositionierung in WeChat Mini-Programmen. Weitere Informationen zur Ankerpunktpositionierung von WeChat Mini-Programmen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!