vue写一个返回顶部

最新推荐文章于 2024-11-02 08:58:20 发布

仰.

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量572

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/QWERTYQ16/article/details/122303454

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文讲解了Vue组件中如何在mounted生命周期钩子中使用箭头函数处理滚动事件，以及箭头函数与普通函数在this指向上的区别。重点讨论了如何通过scroll方法获取并控制滚动高度，并结合watch进行状态管理。

摘要由CSDN通过智能技术生成

普通函数内的this执行调用其函数的对象。

mounted中一定要用箭头函数

<template>
  <div class="go-top" @click="gotop" v-if="show">
    <i class="iconfont icon-top"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      top: 0, //定义一个高度
      show: false,
    };
  },
  mounted() {
    window.onscroll = () => {
      //页面滚动时触发的函数
      this.scroll(); //调用获取滚动的高度
    };
  },
  methods: {
    scroll() {
      let html = document.documentElement; //获取html的节点
      // console.log(html);
      this.top = html.scrollTop; //这是html的滚动高度
    },
    gotop() {
      window.scroll({ top: 0, behavior: "smooth" }); //让页面的滚动高度为0，行为时平滑的
    },
  },
  watch: {
    top(newVal, oldVal) {
      if (newVal > 200) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
  },
  components: {},
};
</script>

普通函数和箭头函数的区别：

（1）箭头函数没有prototype(原型)，所以箭头函数本身没有this
（2）箭头函数的this在定义的时候继承自外层第一个普通函数的this。
（3）如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
（4）箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
（5）箭头函数的this指向全局，使用arguments会报未声明的错误。
（6）箭头函数的this指向普通函数时,它的argumens继承于该普通函数
（7）使用new调用箭头函数会报错，因为箭头函数没有constructor
（8）箭头函数不支持new.target
（9）箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
（10）箭头函数相对于普通函数语法更简洁优雅