Vue向下滚动加载更多数据scroll案例详解

vue-infinite-scroll

安装

 npm install vue-infinite-scroll --save

尽管官方也推荐了几种载入方式，但“最vue”的方式肯定是在main.js中加入

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

实现范例

官方给的代码范例是假设你在根组件写代码，实际上我们肯定是在子组件里写代码，所以代码也需要略作修改，下方只列有用的代码片段：

 
 
{{item.name}}

 data () { return { count: 0, data: [], busy: false } }

 methods: { loadMore: function() { this.busy = true setTimeout(() => { for (var i = 0, j = 10; i 

效果

默认会载入10行数据，只要往下滚动到页面底部，就会在1秒后再次加载10条，然后继续滚动，又会加载10条。就如下图：

选项解释

• v-infinite-scroll="loadMore"表示回调函数是loadMore
• infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，看清楚，busy表示繁忙，繁忙的时候是不执行的。
• infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。

其他选项：

• infinite-scroll-immediate-check 默认值为true，该指令意思是，应该在绑定后立即检查busy的值和是否滚动到底。如果你的初始内容高度不够高、不足以填满可滚动的容器的话，你应设为true，这样会立即执行一次loadMore，会帮你填充一些初始内容。
• infinite-scroll-listen-for-event 当事件在Vue实例中发出时，无限滚动将再次检查。
• infinite-scroll-throttle-delay 检查busy的值的时间间隔，默认值是200，因为vue-infinite-scroll的基础原理就是，vue-infinite-scroll会循环检查busy的值，以及是否滚动到底，只有当：busy为false且滚动到底，回调函数才会执行。

实战应用

可以看到，上方的例子是在不断的修改data变量，data变量的数据不断增加，这看起来是没错的。但是，实战中，我们的新数据肯定是Ajax获取的，并不是范例中的用for循环来灌入无用的自然数，而且，并不需要setTimeout，我们希望的是页面滚动到底部就立即执行Ajax，事实上，上面代码中的setTimeout只是为了模拟一个延迟加载的效果，并不是说必须要延迟1秒才Ajax。

实战中该怎么做？

只需要将这段模拟Ajax的代码改为真正的Ajax获取数据的代码即可：

 setTimeout(() => { for (var i = 0, j = 10; i 

另外，this.busy = false也必须作为Ajax的回调

vue-scroller

安装

 npm install vue-scroller -d

在main.js里面使用

 import VueScroller from 'vue-scroller' Vue.use(VueScroller)

使用

注意：scroller的使用最好设置一个高

数据

 data(){ return{ status:'all', orderList:[], page:0, all_page:1, } },

下拉刷新

 refresh (done) { setTimeout(()=>{ done(); },1500) },

上拉加载更多

• 注意：done的使用，如果在数据没有赋值到模板前就调用，就会一直触发下拉函数，所以我们要在请求成功的回调中模板赋值后调用
• 下拉的函数是绑定属性的方式绑定在scroller标签上的，所以我们不需要在created里面调用一次请求函数，页面初始化的时候回自动调用一次下拉的函数，从而获取到第一页的数据

 //下拉触发 infinite (done) { if(this.page>=this.all_page){ setTimeout(()=>{ this.$refs.myscroller.finishInfinite(true); },1500) }else{ setTimeout(()=>{ this.page++; this.getorderList(done) },500); } }, getorderList(done){ this.$http({ method:'post', url:'/seckill/server/orderList', data:{ jwt:this.jwt, status:this.status, page:this.page, page_size:5 } }).then(res=>{ if(res.data.code == 0){ this.orderList.push.apply(this.orderList,res.data.data.list) this.$refs.myscroller.finishInfinite(true) this.page = res.data.data.page this.all_page = res.data.data.all_page done(); }else{ } }) },

注意

如果涉及到tab栏切换，需要重新设置scroller的状态.finishInfinite(false)参数为false时会从新调用一次上拉函数，从而重置当前scroller的状态

 goodsAll(){ this.status = 'all' this.page = 0 this.all_page = 1 this.$refs.myscroller.finishInfinite(false); this.orderList = [] },

triggerPullToRefresh() 触发下拉刷新

finishPullToRefresh() 完成下拉刷新

this.$refs.my_scroller.finishInfinite(false)
finishInfinite(isNoMoreData :Boolean) 当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘'暂无更多数据

vue-infinite-loading

安装

 npm install vue-infinite-loading --save

组件内使用

 // 组件类使用 import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading } } //使用 基础版  
No more Data
No results Data

基本用法

分页用法

说明： $state: 该组件会传递一个特殊的事件参数$state给事件处理器来改变加载状态，$state参数包括三个方法，它们是loaded方法，complete方法和reset方法。

• loaded方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发。
• complete方法用于完成完整的无限加载，则该组件将不再处理任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法，则此组件将显示用户的结果消息，如果不是，则将显示不再有用户消息，并且可以按slot设置其它内容
• reset方法是将组件返回到原来的状态

条件用法

防抖

 import { debounce } from "lodash"; // 防抖 // 防抖 get: debounce(async function () { let k = await this.$axios.getList_API(); console.log(k, "防抖版"); }, 1000),