vue滚动加载插件vue-infinite-scroll

vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。
https://github.com/ElemeFE/vue-infinite-scroll/
https://www.npmjs.com/package/vue-infinite-scroll

安装

cnpm i vue-infinite-scroll -S
 
 
1

vue引用

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
 
 
1
2

使用

复制html到页面

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>
 
 
1
2
3

其中…部分可以替换成加载中提示语或加载中图片。
在data中定义一个busy属性，对应的是html中infinite-scroll-disabled选项

data () {
    busy: false //是否正在加载过程中
  }
 
 
1
2
3

在methods中定义一个loadMore方法，对应的是html中v-infinite-scroll选项，当滚动到距离底部指定位置时触发的方法。

methods: {
    loadMore: function() {
      this.busy = true;

     //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
      setTimeout(() => {
        //这里请求接口去拿数据，实际应该是调用一个请求数据的方法
        this.busy = false;
      }, 1000);
    }
  }
 
 
1
2
3
4
5
6
7
8
9
10
11

html中可设置的选项：
- v-infinite-scroll
指定触发的方法

• infinite-scroll-distance
  指定滚动条距离底部多高时触发v-infinite-scroll指向的方法

• infinite-scroll-disabled
  等于true时代表正在执行加载，这时禁用滚动触发。

• infinite-scroll-immediate-check
  布尔值(默认值= true)。指令在绑定后立即检查，是否内容高度不足以填充页面容器。

• infinite-scroll-listen-for-event
  当vue实例触发事件时立即再次检查

• infinite-scroll-throttle-delay
  两次检查之间的时间间隔(默认值= 200)

注意

busy为true的时候代表正在执行加载，这时候滚动不会触发方法，但并不会隐藏标签中的内容，这个地方需要自己做处理。

要处理外层标签和加载中提示的显示问题

<div :class="loadMoreHide ? 'load-more-hide' : 'load-more-normal'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
   <span v-show="loadingShow">加载中</span>
 </div>
 
 
1
2
3

1、处理外层标签<div v-infinite-scroll="loadMore" ...>的高度占位问题

.load-more-normal {
    text-align: center;
    height: 60px;
    line-height: 60px;
  }

  .load-more-hide {
    height: 0;
  }
 
 
1
2
3
4
5
6
7
8
9

定义一个loadMoreHide属性，当还有数据的时候，当还有下一页的时候用load-more-normal，没有下一页了就设为load-more-hide

if (this.pageNo >= totalPage) {
  this.busy = true //已经是最后一页了，不需要再触发滚动加载了
  this.loadMoreHide = true  //已经是最后一页了，不需要高度了
} else {
  this.busy = false
  this.loadMoreHide = false
}
 
 
1
2
3
4
5
6
7

2、处理加载中提示
定义一个loadingShow属性，当加载方法执行前设置为true，加载完毕即设置为false。

loadMore () { 

   this.pageNo++ 

   this.busy = true 

   this.loadingShow = true 

   setTimeout(() => { 

     this.getAjaxData(true) 

     this.loadingShow = false 

   }, 1000) 

 }
 
 
1
2
3
4
5
6
7
8
9