vue填坑之回到顶部:

vue来实现回到顶部代码(参考慕课网):

    <div id='goTop' @click='goTop' v-show = 'toTop'>
      <img src="./goTop.png">
    </div>

  let stop = false;                                   // 全局变量,坑处
  let timer = null;					// 全局变量,坑处

mounted() {
      this.$nextTick(function () {
         window.addEventListener('scroll', this.needToTop);  //滚动事件监听
      });
    },
    methods: {
      goTop: function() {				// 回到顶部方法
        clearInterval(timer);
        timer = setInterval(function() {
	    console.log('不妙');
            let curHeight = document.documentElement.scrollTop || document.body.scrollTop;  // 得到当前高度
            var now = curHeight;
            var speed = (0 - now) / 7;								// 随着高度减速
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        console.log(`当前的高度应该是:` + curHeight);
	    console.log('我是零你也那我没办法');
            if (curHeight === 0) {							//当前高度为零,停止这次计时器
              clearInterval(timer);  							// C1
            }
            document.documentElement.scrollTop = curHeight + speed;			//直接给高度赋值,会调用needtotop方法
            document.body.scrollTop = curHeight + speed;				//谷歌的
            stop = false;								// A
	    console.log('回到顶部一次'); 
       }, 30);
      },
      needToTop: function() {
        let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
        let viewHeight = document.documentElement.clientHeight;
        if (curHeight > viewHeight + 100) {
          this.toTop = true;                         //赋值是为了按钮的v-show='toTop'
        }
        else
        {
          this.toTop = false;
        }
        if (stop) {					//STOP
          clearInterval(timer);				//C2
	  console.log('我没了');
        }
        stop = true;					//B
        console.log('执行了一次');
      }
    }

从点击回到顶部开始,正常的执行顺序:

ABABABABABABAB......C1

如果在途中先停下来:

ABAB.....AB.....(此时stop为true,但是你突然动了滚条,-->)............STOP.........C2

好,我们逐一地把timer和stop内化成vue组件里的data:

    data() {
      return {
        dataTimer: null
      };
    },

把方法里的所有的timer改成this.dataTimer;

结果即使到了最顶端,竟然还会出现:

这是为什么????这是为什么????这是为什么????这是为什么????这是为什么????这是为什么????

我们接着把stop内化成vue组件里的data

    data() {
      return {
         dataStop: false
      };
    },

再把以上代码的stop全部换成dataStop,

问题更严重了:直接只滚动了一次

居然只执行了一次?????,

填坑:然后我在watch里面观察了这个stop,结果是,没有执行回调函数:

    watch: {
      dataStop: {
        handler: function() {
          console.log('我变了' + this.dataStop);
        }
      }

结论:

在计时器触发的时候,datastop应该是true的,当计时器又去执行滚动条监听事件的时候,虽然在执行之前已经改了this.datastop为false,但是vue里我们并没有真正的改变过datastop,整个生命周期就是:vue方法调用vue方法,直到vue方法跑完,datastop都没有改动过

vue填坑之回到顶部:

猜你喜欢