小程序 前端實現模擬懶加載

今天寫一個模擬懶加載，為啥不是真的懶加載？因為所有數據是從上個頁面傳過來的，沒請求接口。只是防止數據過多，導致頁面渲染過慢的問題。

用到的是小程序的onReachBottom方法，官方鏈接

   data: {
    showList:[],//顯示在頁面上的數據
    hideList:[],//未顯示在頁面的數據
    pageSize: 20, // 每頁條數
    ifPages:true //是否下滑的時候繼續添加頁面顯示的數據
  },
  onReachBottom(){
    let {showList,hideList,pageSize,ifPages} = this.data;
    if(ifPages){
      let newList = [];
      if(hideList.length>pageSize){//如果未顯示的數據 大於顯示條數 截取添加
        newList = showList.concat(hideList.splice(0,pageSize));
      }else{ //如果不大於 那就直接全部添加
        newList = showList.concat(hideList)
        this.setData({
          ifPages:false,
          hideList:[]
        })
      }
      this.setData({
        chooseList:newList,
        hideList
      })
    }
  },
  onLoad: function (options) {  
    let data = decodeURIComponent(options.data)
    let { hideList } = JSON.parse(data);
    let { pageSize } = this.data;
    if(hideList.length>pageSize){ //如果數據大於頁面顯示條數 那就先賦值條數，然后再通過滑動的時候再加數據
      this.setData({
        showList:hideList.splice(0,pageSize)
      })
    }else{ //如果數據小於顯示條數 直接賦值 且不會再分頁
      this.setData({
        showList:hideList,
        ifPages:false
      })
    }
  },