You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
6.3 KiB
Plaintext
128 lines
6.3 KiB
Plaintext
11 months ago
|
/*!
|
||
|
|
* pull to refresh v2.0
|
||
|
|
*author:wallace
|
||
|
|
*2015-7-22
|
||
|
|
*/
|
||
|
|
var refresher = {
|
||
|
|
info: {
|
||
|
|
"pullDownLable": "下滑刷新...",
|
||
|
|
"pullingDownLable": "Release to refresh...",
|
||
|
|
"pullUpLable": "上滑加载更多...",
|
||
|
|
"pullingUpLable": "Release to load more...",
|
||
|
|
"loadingLable": "Loading..."
|
||
|
|
},
|
||
|
|
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 = "loader";
|
||
|
|
for (var i = 0; i < 4; i++) {
|
||
|
|
var span = document.createElement("span");
|
||
|
|
loader.appendChild(span);
|
||
|
|
}
|
||
|
|
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 = "loader";
|
||
|
|
for (var i = 0; i < 4; i++) {
|
||
|
|
var span = document.createElement("span");
|
||
|
|
loader.appendChild(span);
|
||
|
|
}
|
||
|
|
pullUp.appendChild(loader);
|
||
|
|
var pullUpLabel = document.createElement("div");
|
||
|
|
pullUpLabel.className = "pullUpLabel";
|
||
|
|
if (parameter.ShowUpLable == true) {
|
||
|
|
var content = document.createTextNode(refresher.info.pullUpLable);
|
||
|
|
pullUpLabel.appendChild(content);
|
||
|
|
}
|
||
|
|
pullUp.appendChild(pullUpLabel);
|
||
|
|
scroller.appendChild(pullUp);
|
||
|
|
var pullDownEl = wrapper.querySelector(".pullDown");
|
||
|
|
var pullDownOffset = pullDownEl.offsetHeight;
|
||
|
|
var pullUpEl = wrapper.querySelector(".pullUp");
|
||
|
|
var pullUpOffset = pullUpEl.offsetHeight;
|
||
|
|
this.scrollIt(parameter, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset);
|
||
|
|
},
|
||
|
|
scrollIt: function (parameter, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset) {
|
||
|
|
cceval(parameter.id + "= new iScroll(parameter.id, {useTransition: true,vScrollbar: false,topOffset: pullDownOffset,onRefresh: function () {refresher.onRelease(pullDownEl,pullUpEl,parameter);},onScrollMove: function () {refresher.onScrolling(this,pullDownEl,pullUpEl,pullUpOffset);},onScrollEnd: function () {refresher.onPulling(pullDownEl,parameter.pullDownAction,pullUpEl,parameter.pullUpAction);},})");
|
||
|
|
if (parameter.ShowDownLabel == true) {
|
||
|
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
|
||
|
|
}
|
||
|
|
document.addEventListener('touchmove', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
}, false);
|
||
|
|
},
|
||
|
|
onScrolling: function (e, pullDownEl, pullUpEl, pullUpOffset) {
|
||
|
|
if (e.y > -(pullUpOffset)) {
|
||
|
|
pullDownEl.id = '';
|
||
|
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
|
||
|
|
e.minScrollY = -pullUpOffset;
|
||
|
|
}
|
||
|
|
if (e.y > 0) {
|
||
|
|
pullDownEl.classList.add("flip");
|
||
|
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullingDownLable;
|
||
|
|
e.minScrollY = 0;
|
||
|
|
}
|
||
|
|
if (e.scrollerH < e.wrapperH && e.y < (e.minScrollY - pullUpOffset) || e.scrollerH > e.wrapperH && e.y < (e.maxScrollY - pullUpOffset)) {
|
||
|
|
pullUpEl.style.display = "block";
|
||
|
|
pullUpEl.classList.add("flip");
|
||
|
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.pullingUpLable;
|
||
|
|
}
|
||
|
|
if (e.scrollerH < e.wrapperH && e.y > (e.minScrollY - pullUpOffset) && pullUpEl.id.match('flip') || e.scrollerH > e.wrapperH && e.y > (e.maxScrollY - pullUpOffset) && pullUpEl.id.match('flip')) {
|
||
|
|
pullDownEl.classList.remove("flip");
|
||
|
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onRelease: function (pullDownEl, pullUpEl, parameter) {
|
||
|
|
if (pullDownEl.className.match('loading')) {
|
||
|
|
pullDownEl.classList.toggle("loading");
|
||
|
|
pullDownEl.querySelector('.loader').style.display = "none"
|
||
|
|
pullDownEl.style.lineHeight = pullDownEl.offsetHeight + "px";
|
||
|
|
if (parameter.ShowDownLabel == true) {
|
||
|
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
|
||
|
|
} else {
|
||
|
|
pullDownEl.style.lineHeight = "0px";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (pullUpEl.className.match('loading')) {
|
||
|
|
pullUpEl.classList.toggle("loading");
|
||
|
|
pullUpEl.querySelector('.loader').style.display = "none"
|
||
|
|
pullUpEl.style.lineHeight = pullUpEl.offsetHeight + "px";
|
||
|
|
if (parameter.ShowUpLable == true) {
|
||
|
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
|
||
|
|
} else {
|
||
|
|
pullUpEl.querySelector('.pullUpLabel').style.display = "none"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPulling: function (pullDownEl, pullDownAction, pullUpEl, pullUpAction) {
|
||
|
|
if (pullDownEl.className.match('flip') /*&&!pullUpEl.className.match('loading')*/) {
|
||
|
|
pullDownEl.classList.add("loading");
|
||
|
|
pullDownEl.classList.remove("flip");
|
||
|
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.loadingLable;
|
||
|
|
pullDownEl.querySelector('.loader').style.display = "block"
|
||
|
|
pullDownEl.style.lineHeight = "20px";
|
||
|
|
if (pullDownAction) pullDownAction();
|
||
|
|
}
|
||
|
|
if (pullUpEl.className.match('flip') /*&&!pullDownEl.className.match('loading')*/) {
|
||
|
|
pullUpEl.classList.add("loading");
|
||
|
|
pullUpEl.classList.remove("flip");
|
||
|
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.loadingLable;
|
||
|
|
pullUpEl.querySelector('.loader').style.display = "block"
|
||
|
|
pullUpEl.style.lineHeight = "20px";
|
||
|
|
if (pullUpAction) pullUpAction();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|