详解10分钟学会vue滚动行为

详解10分钟学会vue滚动行为

本文将详细讲解如何在Vue中实现滚动行为，以满足用户在页面中的滚动需求。通过本文，你可以快速了解Vue的相关特性和API，快速上手Vue的开发。

Vue中的滚动行为实现

在Vue中，通过<router-link>组件的scroll-behavior属性，我们可以快速实现滚动行为。

首先，我们需要在router/index.js中设置全局的滚动行为：

const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 滚动到 savedPosition 或者 hash
    if (savedPosition || to.hash) {
      return savedPosition || { selector: to.hash };
    } else {
      // 页面初始滚动到顶部
      return { x: 0, y: 0 };
    }
  },
});

代码中的scrollBehavior函数，接收三个参数：

• to：目标页面的路由对象
• from：来源页面的路由对象
• savedPosition：记录的页面滚动位置

通过判断to对象中是否存在hash，我们可以实现点击锚点时滚动到相应位置。如果没有锚点，当切换页面时，页面将会自动滚动到顶部。

示例一：锚点滚动

在需要滚动行为的页面添加锚点：

<template>
  <div>
    <div class="fixed">
      <router-link to="#part1">part1</router-link>
      <router-link to="#part2">part2</router-link>
    </div>
    <div id="part1">
      <h2>part1</h2>
      <p>这是第一部分的内容</p>
    </div>
    <div id="part2">
      <h2>part2</h2>
      <p>这是第二部分的内容</p>
    </div>
  </div>
</template>

通过<router-link>的to属性可以设置锚点的位置，点击链接时页面会滚动到相应的位置。

示例二：回到顶部

在页面底部添加一个回到顶部的按钮：

<template>
  <div>
    <p>这是内容</p>
    <button @click="scrollTop">回到顶部</button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollTop() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

在按钮被点击时，通过修改document.documentElement.scrollTop属性将页面滚动到顶部。

总结

通过全局设置scrollBehavior，我们可以轻松实现Vue中的滚动行为。对于需要更加复杂的滚动行为，可以通过修改scrollBehavior函数来实现。同时，我们还可以通过javascript代码控制页面的滚动，实现更灵活的滚动行为。