微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
时间:2019-03-30
本文章向大家介绍微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一),主要包括微信小程序上滑加载下拉刷新(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)分批加载数据(二)
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- 多图见证模拟机器人的逆天成长:论进化策略在强化学习中的应用
- Hue禁止用户下载数据问题分析
- 如何在RedHat6上使用Bind搭建DNS服务
- 如何使用Cloudera Manager升级Spark2.1版本至Spark2.2
- Cloudera Manager分发Parcel异常分析
- 如何在Hue中配置Impala的负载均衡
- 35行代码实现千万级别字典的快速去重
- PIMS三个漏洞+里程密最新版V2.3 SQL注入漏洞
- 如何在Redhat7.3安装CDH5.14
- CDSW1.3的新功能
- 如何在Hue中配置HiveServer2的负载均衡
- 如何修改CDH集群的IP地址
- 如何在Kerberos环境的CDH集群部署Livy
- 如何在Kerberos环境下使用Haproxy实现HiveServer2负载均衡
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Build类的详解及简单实例
- Android使用CrashHandler来获取应用的crash信息的方法
- 数据魔术师小白零基础实现简单人脸识别
- Android编程实现XML解析与保存的三种方法详解
- 浅谈关于Android路由的实现
- Android中EditText禁止输入表情的实例代码
- Android仿微信右滑返回功能的实例代码
- 算法复现·推荐算法 | DeepFM for CTR Prediction
- Android 中Notification弹出通知实现代码
- Android编程实现添加低电流提醒功能的方法
- Android头像上传功能的实现代码(获取头像加剪切)
- Android自定义View画圆功能
- Android打包版本号设置方法
- Android编程实现获取系统内存、CPU使用率及状态栏高度的方法示例
- Android 6.0开发实现关机菜单添加重启按钮的方法