微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)

 更新时间:2017年05月11日 11:44:37   投稿:lqh  
这篇文章主要介绍了微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据的相关资料,需要的朋友可以参考下

微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)

页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验。

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。

注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况。

项目需求

通过使用scroll-view 自定义的鼠标滚动事件onscrollLower,监听页面下拉事件

page.init()的方法里封装了请求数据的接口,后台api文档自带分页pageSize,默认值为10,-1为请求全部数据。

说明:

触发下滑事件通过与页面data缓存数据对比,去请求接口。

代码实现

var n=0
 page.init = function(callback) {
 page.data.loading = true;
 n+=10;
 cardService.listFavoriteCards(n,function(result){
 var cards = result.data.favoriteCards; 
 var starCards = result.data.starCards;

 starCards.sort(function(c1,c2){
 var c1Name = pinyingUtil.getInitials.convertPinyin(c1.name);
 var c2Name = pinyingUtil.getInitials.convertPinyin(c2.name);

 return c1Name > c2Name ? 1 : -1;
 });

 if(starCards && starCards.length> 0) {
 starCards.forEach(function(c){
 var compressEntName = dictService.compressEntName(c.companyName);
 c.compressEntName = compressEntName;
 });
 }

 page.setData({
 "favoriteCards" : cards,
 "starCards" : starCards,
 "filterType" : "name",
 "groups" : cardService.groupCardsByNameFirstLetter(cards),
 "loadding":false
 });
 wx.setStorageSync("setgroups",page.data.groups)
 });
 };

}

onLoad: function (options) {

 var geigroups=wx.getStorageSync('setgroups')
 var result =[]
 for(var i=0; i<geigroups.length; i+=5){
 result.push(geigroups.slice(i,i+5));
 }
 var resultd=result[0]
 if(geigroups){ 
 page.setData({
 "groups" : resultd
 }); 
 console.log('缓存')
 }else{
 if (wx.getStorageSync("token")) {
 page.init();
 page.initProfile();
 } else {
 App.addListener("evt_login", function () {
 page.init();
 page.initProfile();
 });
 }
 console.log('正常')
 }
}

onscrollLower:function(){
 var page = this;
 var geigroups=wx.getStorageSync('setgroups') //第一步拿数据
 var result =[] //定义空数组
 var n=0; //定义index
 for(var i=0; i<geigroups.length; i+=10){
 result.push(geigroups.slice(i,i+10));
 } //把数据每10个一组push到 result里面
 n+=1;

 var q=this.data.groups.length;
 if(geigroups){ //如果有缓存
 if(geigroups.length<=q) //如果当前data的数据少于缓存执行以下命令
 if (wx.getStorageSync("token")) { //如果有token请求数据
 page.init();
 page.initProfile();
 } else {
 App.addListener("evt_login", function () { //监听用户登陆以后 请求数据
 page.init();
 page.initProfile();
 });
 }

 }else{
 page.setData({
 "groups" : result[n], 
 }); 
 }
 },

总结

加载数据的几种方法:

方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

方法二:在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉

因项目需求采用方法二去实现,结合本地储存是这次的难点,希望对大家有帮助,有不足的地方大家多提建议,共勉。

 相关文章:微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现

    这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • JS深入浅出Function与构造函数

    JS深入浅出Function与构造函数

    这篇文章主要介绍了JS深入浅出Function与构造函数,Function是一个构造函数,可以通过该构造函数去创建一个函数,创建的函数是一个Function对象,具体内容请参考下面文章的详细内容,需要的朋友可以参考一下
    2021-12-12
  • JS中的every()对空数组总返回true原理分析

    JS中的every()对空数组总返回true原理分析

    这篇文章主要为大家介绍了JS中的every()对空数组总返回true原理分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 微信小程序 加载 app-service.js 错误解决方法

    微信小程序 加载 app-service.js 错误解决方法

    这篇文章主要介绍了微信小程序 加载 app-service.js 错误详解的相关资料,在开发微信小程序过程中出现了app-services.js的错误,并解决此问题,需要的朋友可以参考下
    2016-10-10
  • Web应用开发TypeScript使用详解

    Web应用开发TypeScript使用详解

    这篇文章主要为大家介绍了Web应用开发TypeScript的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • 微前端qiankun改造日渐庞大的项目教程

    微前端qiankun改造日渐庞大的项目教程

    这篇文章主要为大家介绍了微前端qiankun改造日渐庞大的项目教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 带你理解JavaScript 原型原型链

    带你理解JavaScript 原型原型链

    理解js中原型、原型链这个概念,绝对是帮助我们更深入学习js的必要一步,比如,如果js开发者想理解js继承,new关键字原理,甚至封装组件、优化代码,弄明白js中原型、原型链更是前提条件。本篇文章,用最简洁的文字,清楚明白讲解原型链相等关系和原型、原型链存在的意义
    2021-09-09
  • 微信小程序 获取相册照片实例详解

    微信小程序 获取相册照片实例详解

    这篇文章主要介绍了微信小程序 获取相册照片实例详解的相关资料,需要的朋友可以参考下
    2016-11-11
  • JS前端使用canvas实现扩展物体类和事件派发

    JS前端使用canvas实现扩展物体类和事件派发

    这篇文章主要为大家介绍了JS前端使用canvas实现扩展物体类和事件派发示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 将HTML自动转为JS代码

    将HTML自动转为JS代码

    将HTML自动转为JS代码...
    2006-06-06

最新评论