vue 项目中当页面滚动到一定高度时触发某种事件

vue 项目中当页面滚动到一定高度时触发某种事件

1.在data中定义初始化数据

  data() {
    return {
      scrollTopNum: "",//页面滚动的高度
      tabshow: false,//是否进行某种操作
    };
  },

2.在生命周期中添加滚动事件

  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

3.获取页面滚动的高度

  methods: {
    handleScroll() {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      this.scrollTopNum = top;
    }
   }

4.监听页面滚动的距离,当达到一定距离时,触发某个操作

  watch: {
    scrollTopNum: function () {
      if (this.scrollTopNum > 45) {
        this.tabshow = true;
      } else {
        this.tabshow = false;
      }
    },
  },