「VUE架构」Vue监听滚动事件响应索引及滚动距离锚点的控制

本文主要介绍vue当前页面滚动时，索引的自动切换及滚动距离锚点的控制。同时也解决了vue切换路由后上一个页面监听scroll滚动事件会在新页面报错问题。

一、直接上逻辑代码，DOM页面和样式不在一一赘述。

var doTop,  // 距离顶部的距离
  noScroll = false;  // 是否在滚动的判断
  
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll); //注销监听页面滚动事件
  },
  methods: {
    init() {
      window.addEventListener("scroll", this.scroll); //启动监听页面滚动事件
    },
    scroll() {
      if (!noScroll) {
        var appealDo = this.getOffsetTop("appealDo") - 80; //此处的appealDo需要dom节点设置 ref="appealDo" 80为安全距离
        var appealComm = this.getOffsetTop("appealComm") - 80; //此处的appealDo需要dom节点设置 ref="appealComm"
        var scrollTop = this.getScrollTop();
        if (scrollTop <