关于微信小程序列表懒加载的解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于微信小程序列表懒加载的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

  //构造方法
  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})
  },

这样就完成了一个列表的懒加载操作。文章来源地址https://www.toymoban.com/news/detail-522918.html

到了这里，关于关于微信小程序列表懒加载的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！