J'ai un lien de routeur dans le titre de mon site Web qui, une fois cliqué, m'amène à la page /registration
qui contient un formulaire. Ce que je veux réaliser, c'est que lorsque je clique dessus, il défile jusqu'au formulaire d'inscription à l'aide du plugin vueScrollTo.
Cela fonctionne maintenant, mais pas à 100?% comme je souhaite qu'il se comporte. Pour l'instant, lorsque je ne suis pas sur la page /registration
頁面上并單擊時,它會完美滾動到表單,但是當我在 /registration
et que je clique, le formulaire défile parfaitement, mais lorsque je suis sur la page
Tentative de faire défiler jusqu'à un élément qui n'est pas sur la page?: non défini
Je crois que cela se produit parce que je déclenche l'événement pendant le cycle de vie installé. Existe-t-il une meilleure solution pour que cela fonctionne ?
站點標頭組件
<template> <router-link to="/registration" class="nav-row--primary__button" @click.native="scrollToRegForm()" > Sign up </router-link> </template> <script> export default { mounted() { if (window.location.href.indexOf("/registration") > 0) { const regForm = document.getElementById("regForm"); setTimeout(() => this.scrollToRegForm(regForm), 1); } }, methods: { scrollToRegForm(element) { VueScrollTo.scrollTo(element, 1000); } } }
注冊頁面組件
<div class="container--content spacing-ie" id="regForm"> <RegistrationForm /> </div>??
c'est setTimeout:
methods: { scrollToRegForm(element) { this.$router.push('/regForm') setTimeout(() =>{ VueScrollTo.scrollTo(element, 1000); }, 1000) }
}
Vous devez d'abord ajouter la configuration suivante dans yarn中添加vue-scrollto
,然后在nuxt.config.js
{ modules: [ 'vue-scrollto/nuxt', ] }
Ensuite, ce modèle devrait résoudre le problème
sssccc
J'ai essayé de faire ?a depuis une autre page, ?a a bien fonctionné, pas besoin d'appeler vue-scrollto
,只需使用簡單的 <nuxt-link>
depuis cette page pour déménager.
Cette page de documentation peut vous aider à comprendre $refs
?: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements