微信小程序上滑加载下拉刷新(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 相关文章推荐
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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 adodb连接不同数据库
2009/03/19 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
js的匿名函数使用介绍
2013/12/11 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
法学个人求职信范文
2014/01/27 职场文书
保健品市场营销方案
2014/03/31 职场文书
解放思想演讲稿
2014/09/11 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
用JS实现飞机大战小游戏
2021/06/09 Javascript