移动端下拉刷新上拉加载更多组件Iscroll组件的使用
前阶段做app H5页面
有一个列表页需要下拉刷新上拉加载更多的需求，找到了Iscroll组件。看了相应的js，其实现这个功能的原理是监听滚动事件，利用滚动的方向，滚动的距离实现功能。之前用过的iscroll的逻辑大致是监听滚动的距离和5px做了一个比较，然后给固定的头部（内容为向下刷新）活底部（内容为上拉加载更多）添加或者移除相应的类，然后在通过判断头部或者底部是否存在这个类来进行的一个判断，从而触发刷新或者ajax请求加载更多。
其实为了完成这个需求找过两版插件，但是第一版出现了问题：当内容大于一屏的时候才能显现出来，当上拉的时候，屏幕并不能顺滑的向上滑动，而且在松开手之后内容总是定位到最上端，效果和里面内容设置了top:0一样。其实我就简单的试验了一下demo，后来出了bug在去试验demo的时候发现demo也有这个问题（囧）。
后来又找了一个基于iscroll的dem，因为适合具体的业务相关，所以对其进行了实例化，下面贴出代码：
//
function pullWay(option) {
var pageNo = 2;
function Refresh() {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
//这里写你的刷新代码
document.getElementById("wrapper").querySelector(".pullDownIcon").style.display = "none";
document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "<img src='../../images/ok.png'/>刷新成功";
setTimeout(function () {
wrapper.refresh();
document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "";
}, 1000); //模拟qq下拉刷新显示成功效果
/****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/
}, 1000);
}
function Load() {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
$.ajax({
type: "GET",
url: option.url,
data: {
pageSize: 1,
pageNo: pageNo++
},
dataType: "json",
// contentType: 'application/json',
success: function (data) {
var html = option.ajaxWay(data);
for (i = 0; i < 1; i++) {
li = document.createElement('li');
li.innerHTML = html;
el.appendChild(li, el.childNodes[0]);
if (option.details) {
option.details();
}
wrapper.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}
}
});
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
setTimeout(function(){
wrapper.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
},3300)
}
var refresher = {
info: {
"pullDownLable": "下拉刷新",
"pullingDownLable": "释放立即刷新",
"pullUpLable": "上拉加载更多",
"pullingUpLable": "释放加载更多",
"loadingLable": "加载中..."
},
init: function (parameter) {
var wrapper = document.getElementById(parameter.id);
var div = document.createElement("div");
div.className = "scroller";
wrapper.appendChild(div);
var scroller = wrapper.querySelector(".scroller");
var list = wrapper.querySelector("#" + parameter.id + " ul");
scroller.insertBefore(list, scroller.childNodes[0]);
var pullDown = document.createElement("div");
pullDown.className = "pullDown";
var loader = document.createElement("div");
loader.className = "pullDownIcon";
pullDown.appendChild(loader);
var pullDownLabel = document.createElement("div");
pullDownLabel.className = "pullDownLabel";
pullDown.appendChild(pullDownLabel);
scroller.insertBefore(pullDown, scroller.childNodes[0]);
var pullUp = document.createElement("div");
pullUp.className = "pullUp";
var loader = document.createElement("div");
loader.className = "pullUpIcon";
pullUp.appendChild(loader);
var pullUpLabel = document.createElement("div");
pullUpLabel.className = "pullUpLabel";
var content = document.createTextNode(refresher.info.pullUpLable);
pullUpLabel.appendChild(content);
pullUp.appendChild(pullUpLabel);
scroller.appendChild(pullUp);
var pullDownEle = wrapper.querySelector(".pullDown");
var pullDownOffset = pullDownEle.offsetHeight;
var pullUpEle = wrapper.querySelector(".pullUp");
var pullUpOffset = pullUpEle.offsetHeight;
this.scrollIt(parameter, pullDownEle, pullDownOffset, pullUpEle, pullUpOffset);
},
scrollIt: function (parameter, pullDownEle, pullDownOffset, pullUpEle, pullUpOffset) {
eval(
parameter.id + "= new iScroll(\
parameter.id,\
{\
useTransition: true,\
vScrollbar: false,\
topOffset: pullDownOffset,\
onRefresh: function () {\
refresher.onRelease(pullDownEle,pullUpEle);\
},\
onScrollMove: function () {\
refresher.onScrolling(this,pullDownEle,pullUpEle,pullUpOffset);\
},\
onScrollEnd: function () {\
refresher.onScrollEnd(pullDownEle,parameter.pullDownAction,pullUpEle,parameter.pullUpAction);\
}\
})"
);
},
onScrolling: function (e, pullDownEle, pullUpEle, pullUpOffset) {
if (e.y > -(pullUpOffset) && !pullDownEle.className.match('loading')) {
pullDownEle.classList.remove("flip");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
pullDownEle.querySelector('.pullDownIcon').style.display = "block";
e.minScrollY = -pullUpOffset;
}
if (e.scrollerH < e.wrapperH && e.y > e.maxScrollY - pullUpOffset && pullUpEle.className.match("flip") || e.scrollerH > e.wrapperH && e.y > e.maxScrollY - pullUpOffset && pullUpEle.className.match("flip")) {
pullUpEle.classList.remove("flip");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
}
if (e.y > 0 && !pullUpEle.className.match('loading') && !pullDownEle.className.match('loading')) {
pullDownEle.classList.add("flip");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullingDownLable;
e.minScrollY = 0;
}
if (e.scrollerH < e.wrapperH && e.y < (e.minScrollY - pullUpOffset) && !pullDownEle.className.match('loading') && !pullUpEle.className.match('loading') || e.scrollerH > e.wrapperH && e.y < (e.maxScrollY - pullUpOffset) && !pullDownEle.className.match('loading') && !pullUpEle.className.match('loading')) {
pullUpEle.classList.add("flip");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullingUpLable;
}
},
onRelease: function (pullDownEle, pullUpEle) {
if (pullDownEle.className.match('loading')) {
pullDownEle.classList.toggle("loading");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
}
if (pullUpEle.className.match('loading')) {
pullUpEle.classList.toggle("loading");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
}
},
onScrollEnd: function (pullDownEle, pullDownAction, pullUpEle, pullUpAction) {
if (pullDownEle.className.match('flip') && !pullDownEle.className.match('loading')) {
pullDownEle.classList.add("loading");
pullDownEle.classList.remove("flip");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.loadingLable;
if (pullDownAction) pullDownAction();
}
if (pullUpEle.className.match('flip') && !pullUpEle.className.match('loading')) {
pullUpEle.classList.add("loading");
pullUpEle.classList.remove("flip");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.loadingLable;
if (pullUpAction) pullUpAction();
}
}
}
refresher.init({
id: "wrapper", //<------------------------------------------------------------------------------------┐
pullDownAction: Refresh,
pullUpAction: Load
});
}
原版的init函数，Refresh函数和Load函数不在这个js里面，为了做成一个统一的组件，将其封装在这个js里面，这样pullWay就是唯一的入口，传入相应的参数即可，
你可以把page，ajax等在外部随意变化，最后当做参数传进来。对比一个之前的js，我做了一个比较，区别在于对于距离的选取更精确和更准确，并木有明确的数字，
而是在触发事件的时候，对于相应的事件距离和容器距离进行获取和对比，从而进行下一步的判断和事件触发。实现的效果和官方demo的效果一样，符合现在大部分的下拉
刷新上拉加载更多的需求，和原生的区别在于最下面的上拉加载更多的按钮不能在顶部定位，而是始终在内部内容的最下方。这个我后续会去找demo或者方法去优化，
希望这篇文章对大家有用，如果有什么不清楚的地方或者由于自己的项目造成的不适用，欢迎一起来讨论。
