So implementieren Sie die Funktion „Mounted Hook“ in Vue, um die Knotenhöhe zu ermitteln

Dieses Mal zeige ich Ihnen, wie Sie die Funktion „Mounted Hook“ in Vue implementieren, um die Knotenhöhe zu erhalten, und welche Vorsichtsmaßnahmen für die Implementierung der Funktion „Mounted Hook“ in Vue gelten, um die Knotenhöhe zu erhalten ist ein praktischer Fall, werfen wir einen Blick darauf.

Aufgetretene Probleme

Ich entwickle kürzlich ein Vue-Projekt, das eine Seitenboden-Schiebekomponente verwendet, also habe ich es direkt in ein gepackt, bin aber auf einen Fehler gestoßen. Das heißt, ich muss den OffsetTop dieser Komponente abrufen und dann, wenn die Seite zu dieser Position scrollt, das Attribut position auf „Fixed“ setzen, um es auf dem Bildschirm zu fixieren. Das Problem besteht darin, dass ich, wenn ich „offsetTop“ in der gemounteten Hook-Funktion erhalte, das falsche „offsetTop“ erhalte, wenn ich die Seite in einem neuen Tab öffne, aber wenn ich die aktuelle Seite aktualisiere, gibt es kein Problem.

Positionierungsproblem

Das Problem wurde später gefunden, es war ein Ladeproblem, ein neues Fenster wurde geöffnet Bild, die Standardeinstellung ist nicht zwischengespeichert, Das Bild ist Die GET-Anforderung ist asynchron und js muss schneller ausgeführt werden als das Bild-GET. Wenn also die gemountete Hook-Funktion ausgeführt wird, wurde das Bild nicht vollständig geladen und es wird ein falscher OffsetTop erhalten.

Lösung

Fügen Sie dem Bild ein Ref-Attribut hinzu und schreiben Sie es in die gemountete Hook-Funktion in dieser Komponente,

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}

Der Bus hier ist der EventBus Verwendet wird die Ereignisantwortmethode in den beiden Komponenten. Wenn Sie es nicht verstehen oder interessiert sind, können Sie hier auf EventBus klicken.
In den Komponenten, die versetzt werden müssenTop

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung des Node.js-Puffers

So erstellen Sie eine Webpack+React-Entwicklungsumgebung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion „Mounted Hook“ in Vue, um die Knotenhöhe zu ermitteln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!