时间戳

首页 > 解决方案 > 如何在不同组件的vue js中实现平滑滚动？

javascript - 如何在不同组件的vue js中实现平滑滚动？

问题描述

我正在尝试在 Vue 中使用不同的组件实现平滑滚动。像 About.vue 是主要组件，AboutHeader.vue 和 AboutContent.vue 是 About.vue 内部的子组件。

AboutHeader.vue

<template>
     <div>
        <h1> About Heading</h1>
        <a href="#content">content</a>
     </div>
</template>

AboutContent.vue

<template>
      <div>
         <h2> About Content</h2>
       </div>
</template>

关于.vue 文件

<template>
  <div>
      <AboutHeader/>
      <AboutContent id="content"/>
  </div>
</template>

锚标签的点击滚动是有效的，但它不是平滑滚动，我尝试使用 vue2-smooth-scroll 但它不工作。

我把它放在我的 main.js 文件中。

import VueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(VueSmoothScroll)

在 AboutHeader.vue 文件中

<a href="#content" v-smooth-scroll></a>

标签： javascripthtmlvue.jsvuejs2smooth-scrolling

解决方案

推荐阅读