基于HTML5上使用iScroll实现下拉刷新,上拉加载更多


Posted in Javascript onMay 21, 2016

前言

前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据。

使用技巧

1、引用iScroll.js, 在初始化时添加两个事件监听:touchMove、DOMContentLoaded。

2、实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。

3、上拉加载更多请求后台时就相当于分页请求数据,这时候需要在ajax请求时发送pageIndex参数,而初始化加载时需要从后台返回一个pageCount以便前台判断。

4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。

运行效果图

基于HTML5上使用iScroll实现下拉刷新,上拉加载更多

实现方法

var  myScroll,
 pullDownEl, pullDownOffset,
 pullUpEl, pullUpOffset,
 generatedCount = 0;

/**
 * 下拉刷新 (自定义实现此方法)
 * myScroll.refresh(); 数据加载完成后,调用界面更新方法
 */
function pullDownAction () {
 setTimeout(function () { 
 var el, li, i;
 el = document.getElementById('thelist');

 for (i=0; i<3; i++) {
 li = document.createElement('li');
 li.innerText = 'Generated row ' + (++generatedCount);
 el.insertBefore(li, el.childNodes[0]);
 }
 
 myScroll.refresh(); //数据加载完成后,调用界面更新方法 
 }, 1000); 
}

/**
 * 滚动翻页 (自定义实现此方法)
 * myScroll.refresh(); // 数据加载完成后,调用界面更新方法
 */
function pullUpAction () {
 setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
 var el, li, i;
 el = document.getElementById('thelist');

 for (i=0; i<3; i++) {
 li = document.createElement('li');
 li.innerText = 'Generated row ' + (++generatedCount);
 el.appendChild(li, el.childNodes[0]);
 }
 
 myScroll.refresh(); //数据加载完成后,调用界面更新方法 
 }, 1000); 
}

/**
 * 初始化iScroll控件
 */
function loaded() {
 pullDownEl = document.getElementById('pullDown');
 pullDownOffset = pullDownEl.offsetHeight;
 pullUpEl = document.getElementById('pullUp'); 
 pullUpOffset = pullUpEl.offsetHeight;
 
 myScroll = new iScroll('wrapper', {
 scrollbarClass: 'myScrollbar', 
 useTransition: false, 
 topOffset: pullDownOffset,
 onRefresh: function () {
 if (pullDownEl.className.match('loading')) {
 pullDownEl.className = '';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
 } else if (pullUpEl.className.match('loading')) {
 pullUpEl.className = '';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
 }
 },
 onScrollMove: function () {
 if (this.y > 5 && !pullDownEl.className.match('flip')) {
 pullDownEl.className = 'flip';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
 this.minScrollY = 0;
 } else if (this.y < 5 && pullDownEl.className.match('flip')) {
 pullDownEl.className = '';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
 this.minScrollY = -pullDownOffset;
 } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
 pullUpEl.className = 'flip';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
 this.maxScrollY = this.maxScrollY;
 } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
 pullUpEl.className = '';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
 this.maxScrollY = pullUpOffset;
 }
 },
 onScrollEnd: function () {
 if (pullDownEl.className.match('flip')) {
 pullDownEl.className = 'loading';
 pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...'; 
 pullDownAction(); // ajax call
 } else if (pullUpEl.className.match('flip')) {
 pullUpEl.className = 'loading';
 pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...'; 
 pullUpAction(); // ajax call
 }
 }
 });
 
 setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

//初始化绑定iScroll控件 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

总结

主要还是要对iScroll做一些初始化的操作,针对不同的动作显示不同的提示信息,然后针对下拉和上拉事件写相应刷新和加载更多的处理方法即可。

Javascript 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
微信小程序异步处理详解
Nov 10 Javascript
解读ES6中class关键字
Nov 20 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
jQuery插件pagination实现无刷新分页
May 21 #Javascript
JavaScript中对JSON对象的基本操作示例
May 21 #Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 #Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 #Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 #Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 #Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中os.path用法分析
2015/01/15 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
python字符串的index和find的区别详解
2020/06/20 Python
python安装sklearn模块的方法详解
2020/11/28 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
文案策划求职信
2014/04/14 职场文书
主要负责人任命书
2014/06/06 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
教代会闭幕词
2015/01/28 职场文书
远程教育学习心得体会
2016/01/23 职场文书
初中化学教学反思
2016/02/22 职场文书
Python基础知识学习之类的继承
2021/05/31 Python