前端实现数据的分批加载

当服务端数据没有进行分页处理时，ajax请求一次接口返回所有的数据；当请求数据过多的时候页面渲染会非常慢，并且很容易造成页面卡死现象；因此，前端可以通过js进行分页，达到分批加载数据的目的。

一、技术点
使用vue+es6+axios+mock.js。这里mock了32条随机数据，不熟悉的小伙伴请翻阅mock.js官方文档进行学习。

1、vue.js
2、mock.js
3、axios.js

二、效果图

三、原理
利用slice截取前5条数据（如arr.slice(0,5)），当点击加载更多时累加5条数据(arr.slice(5,10))，然后把数组里的obj数据push到一个变量里，然后用vue来进行模板渲染。

这里，熟悉一下slice()的用法：
slice() 可从已有的数组中返回选定的元素
语法：arrayObject.slice(start,end)
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

注意了~ slice()和splice()名字上用法上容易混淆，请小伙伴们自行百度，这里一笔带过。

四、代码

//mock.js 随机模拟32条数据
"data|32": [{
  "id|+1": 1,
  "title": "@title"
}]

//vue中data数据
data: {
  list: [],    //存放数据容器
  page: 0,    //第一条数据
  number: 5    //第五条数据
}

//vue生命周期默认加载请求前5条数据
created(){
  axios.get('xxx')
  .then((res) => {
    console.log(res);
    if(res.status == "200"){
      console.log(res.data.data);
      this.list = res.data.data.slice(this.page, this.number);
    }
  })
  .catch((error) => {
    console.log(error);
  })
}

//点击加载更多
methods: {
  onLoad(){
    //累加5条数据
    this.page = this.page + 5; 
    this.number = this.number + 5; 
    // 截取后返回的是一个数组对象 
    axios.get('xxx')
    .then((res) => {
      console.log(res);
      if(res.status == "200"){
        let data = res.data.data.slice(this.page, this.number);
        console.log(data);
        data.forEach((item, index) => {
          //因此只需要遍历里面的对象 因为数组push不进数组 push对象到数组里即可
          console.log(item);
          this.list.push(item);
        })
        //咳咳 用push方法有点麻烦 竟然返回数组直接用concat()拼接就可以了 emmm... 而且在小程序里上拉加载push数据不会叠加数据~
      }
    })
    .catch(function (error) {
      console.log(error);
    })
  }
}

//html
<div class="list">
   <p v-for="(item,index) in list" :key="index" :id="item.id">{{item.title}}</p>
</div>

五、最后
码字不易，喜欢请点个赞~