vue2的scroll监听-下拉记载更多

本文主要是介绍vue2的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++;
            }
}
```

这篇关于vue2的scroll监听-下拉记载更多的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！