标签：vue 下拉 javascript 监听 vue2 scrollTop scroll 加载

##    vue的scroll监听

*注意！你的容器得有一定高度，或者说能撑出来滚动条* 

通常来说是以下这样子的：

> ​    添加原生监听

```javascript
// 添加监听
mounted(){
  window.addEventListener("scroll", this.scrollHandle);
}
```

>​    使用vue官方的v-on监听

```javascript
<template>
  <div class="container" v-on:scroll="scrollHandle">
      <div class="items"></div>
  </div>
</template>
```

> ​    抑或是再给v-on加上一个修饰词

```javascript
<div class="container" v-on:scroll.native="scrollHandle">
```

**你会发现他们都没有用，这就是vue的"神奇"之处**

最简单正确的使用方法：

> ​    在addEventListener的第三个参数传入true

```javascript
mounted(){
  window.addEventListener("scroll", this.scrollHandle, true);
}
```

就很神奇！！！竟然就可以了？！！

##    实现下拉加载更多

既然监听到了scroll事件，就可以拿到event（虽然这里我没用到event，因为打印出来感觉没啥用），和scrollTop，来实现下拉加载更多的功能。

```JavaScript
/**
    *    lastScrollTop 上次触发上拉加载之后的scrollTop
    *    pages 页数，方便从后端请求数据
    *    loadMore() 加载更多方法
    * 
*/ 
scrollHandle(){
  let scrollTop = document.documentElement.scrollTop;
    let clientHeight = document.documentElement.clientHeight;
    if (scrollTop - this.lastScrollTop > 1000) { 
    // 滚动超过1000加载更多，也可以是800、500
            this.loadMore()
            console.log("loadmore");
            this.lastScrollTop = scrollTop;
            this.pages++;
            }
}
```

标签：vue,下拉,javascript,监听,vue2,scrollTop,scroll,加载
来源： https://blog.csdn.net/qq_44382590/article/details/121368009

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。