基于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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
(function(){})()的用法与优点
Mar 11 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 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
PHP 多进程 解决难题
2009/06/22 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
javascript json 新手入门文档
2009/12/03 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
javascript history对象详解
2017/02/09 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
名人传读书笔记
2015/06/26 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技