微信小程序上滑加载下拉刷新(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 浮点运算的问题分析与解决方法
Aug 27 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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小偷的核心程序
2007/04/09 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python实现连接mongodb的方法
2015/05/08 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python多进程并行代码实例
2019/09/30 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
感恩主题班会教案
2015/08/12 职场文书
2016银行求职自荐信
2016/01/28 职场文书