关于微信小程序列表懒加载的解决方案_微信小程序数据懒加载

  我们在渲染一个展示数组，不能一次性的把所有的元素都展示出来，这样可能会导致用户性能体验下降，因此我们需要把所有的元素先保存在一个容器里，等用户需要（上滑）的时候再拿出来显示，为了更加高效的开发，我封装了方法，为了让封装方法得到的数据能够持久化，我使用了微信小程序缓存技术来保存数据。

  首先我们先写出缓存需要的方法：

  //构造方法
  constructor({ expire = 3600 }){
    //成员属性 过期时间
    //毫秒
    this.expire = new Date().getTime()+expire * 1000;
  }
 
   //删除
   del(key){
      wx.removeStorageSync(key);
   }
 
   //置入数据
   dset(key ,value){
      let data = {expire:this.expire,value};
      this.del(key);
      //设置缓存
      wx.setStorageSync(key, data);
   }

在写一个保存所有展示数据的方法：

  //置入总数据（页面路径，总数据）
  lazy_loading_parent(pagepath,_array){
    this.dset(pagepath,_array);//删除原来的页面渲染数组，放入新的数组
  }

再写一个拿到数据的方法：

  //得到需要渲染的数据(次数，页面路径)
  get_show_array(degree,pagepath){
    let parent_array = this.get(pagepath);
    let child_array = [];
    wx.showLoading({
      title: '加载中',
    },2000)
    let stop_index = degree*10;
    //判断是否溢出
    if(stop_index>parent_array.length){
      stop_index = parent_array.length;
    }
    child_array = parent_array.slice(0,stop_index+1);
    wx.hideLoading();
    return child_array;
  }

使用如下：

  //初始化数据
  data: {
    cur: 1//懒加载次数
  },
 
  //初始化执行
  onLoad(options) {
    // 放入数据组 （cache即是之前封装方法的别名）
    cache.lazy_loading_parent(this.route,arrs);
    // 初始化显示
    this.onReachBottom();
  }，
  //下滑执行
  onReachBottom: function () {
    let datas = cache.get_show_array(this.data.cur,this.route);
    this.setData({cons:datas,cur:this.data.cur+1})
  },

这样就完成了一个列表的懒加载操作。