微信小程序上滑加载下拉刷新(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 fullscreen全屏实现代码
Apr 09 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jQuery中extend函数详解
Jul 13 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
Sea.JS知识总结
May 05 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
JS实现鼠标移动拖尾
Dec 27 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目录与文件操作
2011/12/30 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
详细分析Node.js 模块系统
2020/06/28 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
浅谈python中get pass用法
2019/03/19 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
CSS3实现swap交换动画
2016/01/19 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
行政人员岗位职责
2013/12/08 职场文书
校园达人秀策划书
2014/01/12 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
担保书范本
2015/01/20 职场文书