當(dāng)服務(wù)端數(shù)據(jù)沒(méi)有進(jìn)行分頁(yè)處理時(shí)，ajax請(qǐng)求一次接口返回所有的數(shù)據(jù)；當(dāng)請(qǐng)求數(shù)據(jù)過(guò)多的時(shí)候頁(yè)面渲染會(huì)非常慢，并且很容易造成頁(yè)面卡死現(xiàn)象；因此，前端可以通過(guò)js進(jìn)行分頁(yè)，達(dá)到分批加載數(shù)據(jù)的目的。

一、技術(shù)點(diǎn)
使用vue+es6+axios+mock.js。這里mock了32條隨機(jī)數(shù)據(jù)，不熟悉的小伙伴請(qǐng)翻閱mock.js官方文檔進(jìn)行學(xué)習(xí)。

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

二、效果圖

三、原理
利用slice截取前5條數(shù)據(jù)（如arr.slice(0,5)），當(dāng)點(diǎn)擊加載更多時(shí)累加5條數(shù)據(jù)(arr.slice(5,10))，然后把數(shù)組里的obj數(shù)據(jù)push到一個(gè)變量里，然后用vue來(lái)進(jìn)行模板渲染。

這里，熟悉一下slice()的用法：
slice() 可從已有的數(shù)組中返回選定的元素
語(yǔ)法：arrayObject.slice(start,end)
start 必需。規(guī)定從何處開(kāi)始選取。如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開(kāi)始算起的位置。也就是說(shuō)，-1 指最后一個(gè)元素，-2 指倒數(shù)第二個(gè)元素，以此類(lèi)推。

end 可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒(méi)有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個(gè)參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從數(shù)組尾部開(kāi)始算起的元素。

注意了~ slice()和splice()名字上用法上容易混淆，請(qǐng)小伙伴們自行百度，這里一筆帶過(guò)。

四、代碼

//mock.js 隨機(jī)模擬32條數(shù)據(jù)
"data|32": [{
  "id|+1": 1,
  "title": "@title"
}]

//vue中data數(shù)據(jù)
data: {
  list: [],    //存放數(shù)據(jù)容器
  page: 0,    //第一條數(shù)據(jù)
  number: 5    //第五條數(shù)據(jù)
}

//vue生命周期默認(rèn)加載請(qǐng)求前5條數(shù)據(jù)
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);
  })
}

//點(diǎn)擊加載更多
methods: {
  onLoad(){
    //累加5條數(shù)據(jù)
    this.page = this.page + 5; 
    this.number = this.number + 5; 
    // 截取后返回的是一個(gè)數(shù)組對(duì)象 
    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) => {
          //因此只需要遍歷里面的對(duì)象 因?yàn)閿?shù)組push不進(jìn)數(shù)組 push對(duì)象到數(shù)組里即可
          console.log(item);
          this.list.push(item);
        })
        //咳咳 用push方法有點(diǎn)麻煩 竟然返回?cái)?shù)組直接用concat()拼接就可以了 emmm... 而且在小程序里上拉加載push數(shù)據(jù)不會(huì)疊加數(shù)據(jù)~
      }
    })
    .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>

五、最后
碼字不易，喜歡請(qǐng)點(diǎn)個(gè)贊~