前言

最近碰到一个现场页面崩溃问题，研究后发现是因为其中一个列表加载数据太多导致的页面崩溃，碰到这种情况就得做列表懒加载了，因为是老项目时间有紧，直接采用了分页加载方式去实现懒加载。下面我们来看下具体如何实现的。

实现

技术栈vue2，该功能需要后端进行配合增加分页参数。准备好工具接下来开始。分页加载整体思路非常简单：

1. 首次加载第一页的数据，判断是否有第二页数据。
2. 如果有第二页数据就点击加载更多按钮，请求到第二页数据，将数据请求到的拼接到之前的数据后面。
3. 重复1、2步骤，直到数据全部加载完毕。
   下一页的数据就用列表总数total与列表长度相比较，如果列表长度小于那么就显示出加载更多按钮，可以点击加载下一页数据。

  <template>
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <button v-if="list.length<total" @click="loadMore">加载更多</button>
    <div v-if="isLoading">数据加载中...</div>
    <template>
    
 data(){
   retrun{
     pageNo: 1,
     pageSize:5,
     total:0,
     list: [],
     isLoading:false
   }
  },
  mounted(){
    this.firsetLoad()
  }
  methonds:{
    async loadMore () {
        this.isLoading = false
        this.pageNo++
        const result = await getList({pageNo,pageSzie})
        this.list = this.list.concat(result.list)
        this.isLoading = true
     },
     async firstLoad(){
        this.isLoading = true
        const result = await getList({pageNo,pageSzie})
        this.list = resilt.list
        this.total = result.total
        this.isLoading = false
     }
  }

getList就是请求数据的接口，替换成项目中请求接口即可。注意列表总数total是后端返回的数据，如果没有该值也不用担心，我们可以把思路变一下，把更多数据的判断放到接口请求之后。

    async loadMore () {
        this.pageNo++
        const result = await getList({pageNo,pageSzie})
        if(result.list.length){
          this.list = this.list.concat(result.list)
        }else{
          this.isMore = false //该数据控制加载更多显示隐藏
          this.$message.warning('没有更多数据')
        }
     }

换个方式还是得到了我们想要的结果。

总结

以上就是分页加载列表简单的思路，如果一次性返回全部数据不卡顿，我们还可以请求全部数据，通过slice方法对全部列表进行切分达到分页加载目的。具体的写法我们要根据项目的实际要求去选择。