github：https://github.com/JiaoMeichen/pull-refresh
- html
- css
#wrapper{position:absolute;top:50px;bottom:0;z-index:1;width:100%}/*外层元素*/
.scroller{position:absolute;z-index:1;padding:0;width:100%;-webkit-tap-highlight-color:transparent}/*自己生成*/
.scroller li{min-height:70px;font-size:14px}
.pullDown,.pullUp{height:40px;color:#888;text-align:center;font-size:12px;line-height:40px}
.pullUp{display:block}/*上拉下拉样式*/
.loader{display:inline-block;display:none;padding:0;font-size:0}/*加载中的四个小点*/
.loader span{display:inline-block;margin:0 2px;width:10px;height:10px;border-radius:100%;vertical-align:middle;-webkit-animation:loader .8s linear infinite alternate;animation:loader .8s linear infinite alternate}
.loader span:nth-child(1){background:rgba(245,103,115,.6);-webkit-animation-delay:-1s;animation-delay:-1s}
.loader span:nth-child(2){background:rgba(245,103,115,.8);-webkit-animation-delay:-.8s;animation-delay:-.8s}
.loader span:nth-child(3){background:rgba(245,103,115,1);-webkit-animation-delay:-.26666s;animation-delay:-.26666s}
.loader span:nth-child(4){background:rgba(245,103,115,.8);-webkit-animation-delay:-.8s;animation-delay:-.8s}
.loader span:nth-child(5){background:rgba(245,103,115,.4);-webkit-animation-delay:-1s;animation-delay:-1s}
@keyframes loader{from{transform:scale(0,0)}to{transform:scale(1,1)}}/*动画*/
@-webkit-keyframes loader{from{-webkit-transform:scale(0,0)}to{-webkit-transform:scale(1,1)}}
- index.js
function exchange(pageSize, pageNum, maxVirtualCoin, minVirtualCoin) {
$.ajax({
type: "post",
url: "url",
data: {pageSize: pageSize,pageNum: pageNum,maxVirtualCoin: maxVirtualCoin,minVirtualCoin: minVirtualCoin},
beforeSend: function(request) { request.setRequestHeader("userId","6a025914-772e-4cba-9af5-4a6ab1fbfb8e");},
async: false,
success: function(result) {
var res = JSON.parse(result);
if(res.result == 1) {
var str = "";
if((res.data==null && pageNum==1) ||(res.data.length==0 && pageNum==1)){-----data为空数组时
//***************************if(!res.data && pageNum==1) ----------返回数据data不存在时
mui.toast("暂无更多数据~")
$(".pullUpLabel").html("")
$("#exchange_buyList").html("");
}else if( res.data.length == 0 && pageNum !=1){
//**************************} else if(!res.data && pageNum != 1) {
$(".pullUpLabel").html("已全部加载~")
console.log($(".pullUpLabel").html())
mui.toast("已全部加载~")
}else{
for(var i = 0; i < res.data.length; i++) {
str += "字符串拼接";
}
if(pageNum == 1){
$("#exchange_buyList").html(str);
}else {
$("#exchange_buyList").append(str);
}
}
} else {
mui.toast("已经全部加载啦~")
}
},
error: function() {
mui.toast("error")
}
});
}
refresher.init({
id: "wrapper",//外层元素
pullDownAction: Refresh,//执行刷新函数
pullUpAction: Load//执行加载函数
});
function Refresh() {
setTimeout(function() { // <-- 模拟网络拥塞，从生产清除setTimeout！
pageNum = 1;
exchange(pageSize, pageNum, maxVirtualCoin, minVirtualCoin);//ajax函数
wrapper.refresh(); //记得刷新后，动作完成！
}, 1000);
}
function Load() {
setTimeout(function() { // <-- 模拟网络拥塞，从生产清除setTimeout！
pageNum += 1;
exchange(pageSize, pageNum, maxVirtualCoin, minVirtualCoin);//ajax函数
wrapper.refresh(); //记得刷新后，动作完成！
}, 1000);
}
- pullToRefresh.js
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 = "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";
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) {
eval(parameter.id + "= new iScroll(parameter.id, {useTransition: true,vScrollbar: false,topOffset: pullDownOffset,onRefresh: function () {refresher.onRelease(pullDownEl,pullUpEl);},onScrollMove: function () {refresher.onScrolling(this,pullDownEl,pullUpEl,pullUpOffset);},onScrollEnd: function () {refresher.onPulling(pullDownEl,parameter.pullDownAction,pullUpEl,parameter.pullUpAction);},})");
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) {
if (pullDownEl.className.match('loading')) {
pullDownEl.classList.toggle("loading");
pullDownEl.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
pullDownEl.querySelector('.loader').style.display = "none"
pullDownEl.style.lineHeight = pullDownEl.offsetHeight + "px";
}
if (pullUpEl.className.match('loading')) {
pullUpEl.classList.toggle("loading");
pullUpEl.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
pullUpEl.querySelector('.loader').style.display = "none"
pullUpEl.style.lineHeight = pullUpEl.offsetHeight + "px";
}
},
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();
}
}
}