毅窝疯

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

By hybnx 2019-07-15 vue 来源:https://blog.csdn.net/thatway_wp/article/details/79422368  访问:115

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)

使用
复制html到页面

 


  ...



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

 

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

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

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

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

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的时候代表正在执行加载,这时候滚动不会触发方法,但并不会隐藏标签中的内容,这个地方需要自己做处理。

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

 


   加载中
 

 


1、处理外层标签

 

的高度占位问题

 

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

  .load-more-hide {
    height: 0;
  }

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

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


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

loadMore () {
   this.pageNo++
   this.busy = true
   this.loadingShow = true
   setTimeout(() => {
     this.getAjaxData(true)
     this.loadingShow = false
   }, 1000)
 }