微信小程序上滑加载下拉刷新(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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
js清理Word格式示例代码
Feb 13 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php中动态调用函数的方法
2015/03/16 PHP
CI框架常用函数封装实例
2016/11/21 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
寄语十八大感言
2014/02/07 职场文书
补充协议书范本
2014/04/23 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
《确定位置》教学反思
2016/02/18 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
Redis基本数据类型Set常用操作命令
2022/06/01 Redis