Vue回到顶部

最新推荐文章于 2022-07-19 16:15:19 发布

呆呆bg

最新推荐文章于 2022-07-19 16:15:19 发布

阅读量630

点赞数

分类专栏： nidejs vue 文章标签： vue回到顶部 vue

本文链接：https://blog.csdn.net/weixin_45551411/article/details/102875513

版权

vue 同时被 2 个专栏收录

14 篇文章 3 订阅

订阅专栏

nidejs

3 篇文章 0 订阅

订阅专栏

哪个区域块需要回到顶部，也就是哪个区域块有滚动条加上绑定ref 与@scroll.passive=“getScroll($event)”

 <ul class="list_wrap" ref="top" @scroll.passive="getScroll($event)">

创建并修饰自己回到顶部我这里用的vant框架的组件
绑定click事件或者 v-tap手指事件都可以绑定 ref v-if是为了滚动条滚动多少显示出来

<van-icon name="arrow-up" class="gotop" @click="goTop()" ref="btn" v-if="isTop">top</van-icon>

先默认不显示

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

下面是绑定的两个事件

goTop(){
      //点击事件  这样写会直接把滚动条回到顶部  如果想要动画可以加个定时器  
          this.$refs.top.scrollTop = 0;
 		//下面是我 写的滚动条慢慢回到顶部效果   需要在script下面  export上面  插入let timer = null;
		// timer = setInterval(() => {
      //   if (this.$refs.top.scrollTop > 0) {			//当滚动条大于0时开一个定时器
      //     this.$refs.top.scrollTop -= 100;   //每30毫秒 滚动条减少100
      //   } else {
      //     clearInterval(timer);   //小于0时清除定时器
      //   }
      // }, 30);
    },
    getScroll(event) {  //滚动事件   可以打印看看 里面记录了好多东西，希望你感兴趣console.log(event)
      let scrollTop = event.target.scrollTop;    //滚动条的高度
      if (scrollTop > 600) {  //当滚动条大于600的时候 回到顶部 dom出现
        this.isTop = true;
      } else {    //否则的话  继续消失
        this.isTop = false;
      }
    },

如果有什么需要改正的可以私聊我