Vue滚动锚定在另一个页面上?
P粉627027031
P粉627027031 2024-02-21 10:17:16
0
2
399

我的网站标题中有一个路由器链接,单击后会转到页面 /registration ,上面有一个表单。我想要实现的是,当单击它时,它会使用 vueScrollTo 插件滚动到注册表表单。

它现在可以工作,但不是 100% 我希望它的行为方式。截至目前,当不在 /registration 页面上并单击时,它会完美滚动到表单,但是当我在 /registration 页面本身并单击路由器链接时,我会收到警告

尝试滚动到不在页面上的元素:未定义

我相信这种情况正在发生,因为我在已安装的生命周期中触发了该事件。有没有更好的解决方案可以使其正常工作?

站点标头组件

<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>

P粉627027031
P粉627027031

全部回复(2)
P粉633733146

使用 setTimeout:

methods: {
scrollToRegForm(element) {
  this.$router.push('/regForm')
  setTimeout(() =>{
    VueScrollTo.scrollTo(element, 1000);
  }, 1000)
}

}

P粉668146636

首先需要在yarn中添加vue-scrollto,然后在nuxt.config.js中添加以下配置

{
  modules: [
    'vue-scrollto/nuxt',
  ]
}

那么,这个模板应该可以解决问题



sssccc

尝试从另一个页面进行此操作,效果很好,也无需从此页面调用 vue-scrollto,只需使用简单的 <nuxt-link> 即可移动。


此文档页面可以帮助您了解 $refs: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板