[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 = false
          this.listParams.finished = true
          return
        }
       // 拼接数据
       this.agendaList = this.agendaList.concat(res)
       // 关闭 loading
       this.listParams.loading = false
       // 若返回条目小于设定的每页条目, 则显示 no more
       if (res.length < this.listParams.pageSize) {
         this.listParams.finished = true
       } 
    })
 // 5. 懒加载(在滚动到容器最底部时触发)
    onLazyLoad() {
      this.listParams.loading = true
      if (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)
    },