小程序 前端实现模拟懒加载

今天写一个模拟懒加载，为啥不是真的懒加载？因为所有数据是从上个页面传过来的，没请求接口。只是防止数据过多，导致页面渲染过慢的问题。

用到的是小程序的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
      })
    }
  },