一键到顶部和到底部：Vue.js项目必备的贴心操作

2023-09-09 06:10:36

Vue.js项目中一键到顶部和到底部：提升用户体验的贴心设计

子标题 1：一键到顶部

在漫长的页面上向下滚动时，返回顶部往往是一件令人费神的事情。为了改善用户体验，我们可以添加一个“一键到顶部”按钮，让用户只需轻点一下即可快速返回页面顶部。

<template>
  <div class="container">
    <div class="go-top" v-if="btnFlag" @click="backTop">
      <img :src="imgGoTopSrc" />
      <br />
      <span>回顶部</span>
    </div>
  </div>
</template>

代码说明：

当btnFlag为真时，“一键到顶部”按钮显示。
点击按钮时，调用backTop方法。
backTop方法使用window.scrollTo()方法将页面滚动到顶部。

export default {
  data() {
    return {
      btnFlag: false,
      imgGoTopSrc: require('@/assets/images/go-top.png'),
    };
  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    },
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop;
      this.btnFlag = scrollTop > 100;
    },
  },
};

子标题 2：一键到底部

与“一键到顶部”类似，我们还可以添加一个“一键到底部”按钮，让用户快速滚动到页面的底部。

<template>
  <div class="container">
    <div class="go-bottom" v-if="btnFlag" @click="backBottom">
      <img :src="imgGoBottomSrc" />
      <br />
      <span>到底部</span>
    </div>
  </div>
</template>

代码说明：

当btnFlag为真时，“一键到底部”按钮显示。
点击按钮时，调用backBottom方法。
backBottom方法使用window.scrollTo()方法将页面滚动到底部。

export default {
  data() {
    return {
      btnFlag: false,
      imgGoBottomSrc: require('@/assets/images/go-bottom.png'),
    };
  },
  methods: {
    backBottom() {
      window.scrollTo({
        top: document.documentElement.scrollHeight,
        behavior: 'smooth',
      });
    },
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight;
      const clientHeight = document.documentElement.clientHeight;
      this.btnFlag = scrollTop + clientHeight < scrollHeight - 100;
    },
  },
};