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


Posted in Javascript onMay 11, 2017

微信小程序上滑加载下拉刷新(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)分批加载数据(二)

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

Javascript 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
react实现antd线上主题动态切换功能
Aug 12 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
JS实现的四级密码强度检测功能示例
May 11 #Javascript
详解Vue中状态管理Vuex
May 11 #Javascript
JS简单生成随机数(随机密码)的方法
May 11 #Javascript
ionic实现下拉刷新载入数据功能
May 11 #Javascript
vue2的todolist入门小项目的详细解析
May 11 #Javascript
ionic实现底部分享功能
May 11 #Javascript
学习使用Bootstrap栅格系统
May 11 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
extjs render 用法介绍
2013/09/11 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
使用js画图之饼图
2015/01/12 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python解析xml文件实例分析
2015/05/27 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python中for用来遍历range函数的方法
2018/06/08 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
"火柴棍式"程序员面试题
2014/03/16 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
财务科科长岗位职责
2014/03/10 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫