时间戳

首页 > 解决方案 > 在导航和组件 Vue 之间滚动

vue.js - 在导航和组件 Vue 之间滚动

问题描述

我以这种方式创建了一个 vue 单页：

我的应用程序.vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">

    <Navegacion/>
    <Cabecera/>
    <Contenido/>
    <Aside/>
    <Footer/>
   
  </div>
</template>

我的导航.vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template>

    <div class="flex flex-row blanco">
        <div class="item-uno">
            <nav class="flex flex-row items-center">

                <a @click="desplazar" href="#">Quienes somos</a>
                <a @click="desplazar" href="#">Cómo funciona</a>
                <a @click="desplazar" href="#">Servicios a empresas</a>
                <a @click="desplazar" href="#">Compromiso</a>

            </nav>

        </div>

        <div class="item-dos flex justify-center">

            <img id="logo" src="../assets/logo.svg" alt="logo apeteat">

        </div>

        <div class="item-uno flex justify-center items-center">

            <a class="btn blue">Nuevo pedido</a>
            <div class="flex flex-row items-center">
               <i class="fas fa-shopping-bag"></i>
               <p>0,00 €&lt;/p>
            </div>
        </div>

    </div>
    
</template>
  <script>
  export default {
name: 'Navegacion',
props: {
},
methods: {

  desplazar: function() {
   window.scrollTo(0,200);
    }
  }
}

  </script>

单击导航链接时，我想滚动到相应的组件。

我已经安装了 npm scroll-to，并且我尝试添加一个函数 methd desplazar，但它不起作用。

在此先感谢您的帮助。

标签： vue.js

解决方案

window.scrollTo()是javascript窗口方法，你不需要安装任何东西来使用它。

它适用于您的代码，但href="#"总是将您放在页面顶部，因此它取消了 window.scrollTo()。您需要href="#"从链接中删除。

要首先滚动到组件，您需要像这样向它添加 ref：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">

    <Navegacion ref="Navegacion" />
    <Cabecera ref="Cabecera" />
    <Contenido ref="Contenido" />
    <Aside ref="Aside" />
    <Footer ref="Footer" />
   
  </div>
</template>

你的功能应该是这样的

scrollToNavegacion() {
   window.scrollTo(0, this.$refs.Navegacion.$el.offsetTop);
}

推荐阅读