《基于HTML5上用法iScroll实现下拉刷新,上拉加载更多_.docx》由会员分享，可在线阅读，更多相关《基于HTML5上用法iScroll实现下拉刷新,上拉加载更多_.docx（8页珍藏版）》请在三一文库上搜索。
1、基于HTML5上用法iScroll实现下拉刷新,上拉加载更多_ 本文主要介绍在HTML5中用法iScroll实现下拉刷新，上拉加载更多数据的方法，主要就是写了两个自定义函数pullDownAction和pullUpAction，分别在下拉和上拉的大事中调用他们。 前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开头的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发觉其实下拉只是刷新最新数据而已，上拉是追加数据。 用法技巧 1、引用iScroll.js， 在初始化时添加两个大事监听：touchMove、DOMContentL
2、oaded。 2、实现iScroll插件的onScrollEnd大事， 也就是在这个大事里调用你自己的ajax方法实现数据的刷新和追加。 3、上拉加载更多恳求后台时就相当于分页恳求数据，这时候需要在ajax恳求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台推断。 4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。 运行效果图 实现方法 var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCoun
3、t = 0; /* * 下拉刷新 （自定义实现此方法） * myScroll.refresh(); 数据加载完成后，调用界面更新方法 */ function pullDownAction () setTimeout(function () var el, li, i; el = document.getElementById(thelist); for (i=0; i3; i+) li = document.createElement(li); li.innerText = Generated row + (+generatedCount); el.insertBefore(li, el.ch
4、ildNodes0); 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
5、=0; i3; i+) li = document.createElement(li); li.innerText = Generated row + (+generatedCount); el.appendChild(li, el.childNodes0); myScroll.refresh(); /数据加载完成后，调用界面更新方法 , 1000); /* * 初始化iScroll控件 */ function loaded() pullDownEl = document.getElementById(pullDown); pullDownOffset = pullDownEl.offsetH
6、eight; 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.qu
7、erySelector(.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(
8、.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) p
9、ullUpEl.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;
10、 , 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).innerHT
11、ML = 加载中.; 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做一些初始化的操作，针对不同的动作显示不同的提示信息，然后针对下拉和上拉大事写相应刷新和加载更多的处理方法即可。 .