Beispiel für die Verwendung von Store in Vue3 zum Aufzeichnen der Bildlaufposition

Gesamteffekt

Wenn Sie durch die Homepage-Liste scrollen und die Detailseite aufrufen, können Sie beim Zurückwechseln zur Homepage zum zuvor durchsuchten Ort zurückkehren.

Achten Sie auf Container-Scroll-Ereignisse

Definieren Sie ein Scroll-Ereignis und binden Sie es an das Scroll-Ereignis des Containers. Ich habe hier eine gewisse Drosselung vorgenommen.

const savePosY = () => {
      wenn(Zustand.Timer) return;
      Zustand.Timer = setzeTimeout(() => {
        let node = document.querySelector(".contentWrapper");
        //Scrollposition aufzeichnenstore.commit("setY",node.scrollTop)
        Zustand.Timer = null;
        Zeitüberschreitung löschen(Zustand.Zeitgeber);
      },100)

Holen Sie sich den Container in die Halterung, um das Ereignis zu binden

beimMounted(() => {
    let contentWrapper = document.querySelector(".contentWrapper");
    contentWrapper.addEventListener("scrollen",savePosY);
})

Konfiguration im Store

Der Speicher ist relativ einfach und enthält nur einen Status: y und Mutationen: setY

Standard exportieren {
    Zustand:{
         und: 0
    },
    Mutationen:
        setY(Zustand,Wert){
            Zustand.y = Wert;
        }
    }
}

Holen Sie sich die Scrollposition, wenn die Seite zurückspringt

Führen Sie die Operation auch in onMounted durch, da sonst das Containerelement nicht abgerufen werden kann. Da DOM in Vue asynchron gerendert wird, müssen wir die Operation in nextTick durchführen, um effektiv zu sein

nextTick(() => { contentWrapper.scrollTop = store.state.y; })

endlich

Das Obige ist der vollständige Inhalt dieses Artikels. Wenn etwas falsch ist oder eine bessere Methode vorliegt, können Sie uns dies gerne mitteilen und darauf hinweisen.

Oben sind die Einzelheiten des Beispiels, wie vue3 Store verwendet, um die Scrollposition aufzuzeichnen. Weitere Informationen dazu, wie Vue die Scrollposition aufzeichnet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!