Element UI - v-infinite-scroll无限滚动组件
数据实现滚动至底部时，加载更多数据
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
亿点小知识：这里我们要注意 v-infinite-scroll一定要放到父容器上，同时通过disabled来进行止住加载数据
<template> <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-disabled='disabled'> <li v-for="i in count" class="infinite-list-item">{{ i }}</li> </ul> </template> <script> export default { data () { return { count: 0, disabled:false } }, methods: { load () { if(this.count >= 20){ this.disabled = true }else{ this.count += 2 } } } } </script>
以上就可以控制数据的加载 最多为20条数据
接下来我们在看一下有哪些属性可以更好的帮助我们开发
v-infinite-scroll : oad无限滚动加载的方法
infinite-scroll-disabled : 是否禁用无限滚动加载
infinite-scroll-delay : 节流时延，单位为ms
infinite-scroll-distance: 触发加载的距离阈值，单位为px
infinite-scroll-immediate: 是否立即执行加载方法，以防初始状态下内容无法撑满容器。
默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。
接下来看一段实战的代码：
通过disabled 控制
使用watch 侦听数据的变化
count记录当前是第几页
记得在页面初始的时候 初始化数据
<template> <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-disabled='disabled'> <li v-for="i in dataList" class="infinite-list-item">{{ i }}</li> </ul> </template> <script> export default { data () { return { count: 0, disabled:false, dataList:[] } }, watch: { () => this.dataList.length, value => { if (this.totalQuery== this.inheritData.length) { this.disabled = true; } } }， methods: { getData(){ const data: any = await getList({page: this.count}); this.totalQuery= data.total; if (this.totalQuery== this.dataList.length) { this.disabled= true; } else { this.dataList= [...this.dataList, ...data?.data]; this.count += 1; this.disabled= false; } }, load () { if (totalQuery!= this.dataList.length) { this.getData(); } else { this.disabled = true; } } } } </script>
以上就是对v-infinite-scroll无限滚动组件感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
