基于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 相关文章推荐
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
vue购物车插件编写代码
Nov 27 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Vue项目路由刷新的实现代码
Apr 17 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
详解JavaScript中的this指向问题
Feb 05 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实现rc4加密算法代码
2012/04/25 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
详解js闭包
2014/09/02 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python中的super用法详解
2015/05/28 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
门卫班长岗位职责
2013/12/15 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫