微信小程序上滑加载下拉刷新(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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
childNodes.length与children.length的区别
May 14 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP微信支付开发实例
2016/06/22 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Python中使用中文的方法
2011/02/19 Python
Python装饰器知识点补充
2018/05/28 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
Oracle性能调优原则
2012/05/03 面试题
中专毕业生自荐信范文
2013/11/28 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
律师授权委托书范本
2014/10/07 职场文书
护士年终个人总结
2015/02/13 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python