[Vue+Element UI] v-infinite-scroll 无限滚动使用总结

官方文档

虽然无限滚动组件是 element plus 的组件, 而 element plus 适用于 Vue3, 但亲测同样适用于 Vue2.

// 1. 列表的外层容器添加无限滚动相关属性<div
       class="workbench-agenda-content"
       v-infinite-scroll="onLazyLoad"
       infinite-scroll-disabled="disabled"
       infinite-scroll-immediate="false"><span id="empty-tip" style="margin-top: 10px">暂无数据</span><agenda-list-item
         v-for="item of agendaList":key="item.id":type="agendaType":item="item"/>// 2. 添加 loading 和 no more 场景提示<p v-if="listParams.loading">Loading...</p><p v-if="listParams.finished">No More</p></div>// 3. 列表和列表参数data(){return{agendaList:[],listParams:{pageNo:1,pageSize:4,loading:false,error:false,finished:false,},}}// 4. 列表请求方法queryList(){const params ={pageSize:this.listParams.pageSize,pageNo:this.listParams.pageNo,}
      api.xxx.then((res)=>{// 空数据处理if(!res ||!res.length){this.listParams.loading =falsethis.listParams.finished =truereturn}// 拼接数据this.agendaList =this.agendaList.concat(res)// 关闭 loadingthis.listParams.loading =false// 若返回条目小于设定的每页条目, 则显示 no moreif(res.length <this.listParams.pageSize){this.listParams.finished =true}})// 5. 懒加载(在滚动到容器最底部时触发)onLazyLoad(){this.listParams.loading =trueif(this.listParams.finished ==false){// 加载未结束, 则增加分页参数this.listParams.pageNo++// 请求列表数据this.queryApplyListForWorkbench(this.agendaType)}},},

注:
pageSize 设置要超过当前页面显示数据量, 滚动功能才不会出bug

若结合tab页使用, 注意要在切换回调事件里清空数据并重置参数, 再请求数据

// 待办已办页签切换回调handleAgendaClick(index){this.agendaType = index
      // 重置列表数据this.agendaList =[]this.listParams ={pageNo:1,pageSize:4,loading:false,error:false,finished:false,}this.queryApplyListForWorkbench(this.agendaType)},