基于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 相关文章推荐
document.all与WEB标准
May 13 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
JS函数重载的解决方案
May 13 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 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
第八节--访问方式
2006/11/16 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
js实现计算器功能
2020/08/10 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
python多线程操作实例
2014/11/21 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
单位消防安全制度
2014/01/12 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
南京大屠杀观后感
2015/06/02 职场文书
对公司的意见和建议
2015/06/04 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS