Ich habe eine Vue-Komponente mit mehreren Elementen darin. Ich möchte automatisch zum Ende dieses Elements blättern, wenn eine Methode in der Komponente aufgerufen wird (im Prinzip tun Sie dasselbe wie in Scrolle zum Ende von div? ). Ich habe jedoch nicht den Weg gefunden, das Element in meine Komponente zu bekommen und scrolTop
Ich verwende derzeit Vue 2.0.8
Wie ich verstanden habe, ist der gewünschte Effekt, den Sie wünschen, bis zum Ende einer Liste (oder scrollbaren div) zu blättern, wenn etwas passiert (z. B. ein Element wird zur Liste hinzugefügt). Wenn dies der Fall ist, können Sie mit reinem Javascript und den VueJS-Selektoren bis zum Ende eines Containerelements (oder sogar der Seite selbst) blättern.
%Vor%Ich habe in dieser Geige ein funktionierendes Beispiel gegeben: Ссылка
Jedes Mal, wenn ein Element zur Liste hinzugefügt wird, wird die Liste bis zum Ende gescrollt, um das neue Element anzuzeigen.
Hoffe, das hilft dir.
Ich habe versucht, die akzeptierte Lösung und es hat nicht funktioniert für mich. Ich benutze den Browser-Debugger und habe herausgefunden, dass die tatsächliche Höhe, die verwendet werden soll, clientHeight ABER ist, die Sie in den updated() Haken setzen müssen, damit die ganze Lösung funktioniert.
In der verwandten Frage, die Sie gepostet haben, haben wir bereits einen Weg, dies in einfachem Javascript zu erreichen, also müssen wir nur die js-Referenz auf den Dom-Knoten bringen, den wir scrollen wollen.
Das ref -Attribut kann verwendet werden, um den Verweis auf HTML-Elemente zu deklarieren, um sie in den Komponentenmethoden von vue verfügbar zu machen .
Oder, wenn method in the component ein Handler für ein UI-Ereignis ist und das Ziel mit dem div verknüpft ist, das Sie im Raum scrollen möchten, können Sie einfach Übergeben Sie das Ereignisobjekt zusammen mit Ihren gewünschten Argumenten und führen Sie den Bildlauf wie scroll(event.target.nextSibling) durch.
Hier ist ein einfaches Beispiel mit #ref, um zum Ende eines div zu scrollen.
Beachten Sie, dass Sie mit ref='messageDisplay' im HTML Zugriff auf das Element über vueContent.$refs.messageDisplay
Tags und Links javascript vue.js