<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>iscroll+flipsnap实现左右上下滚动</title>
<style>
body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
#header{position:absolute; z-index:2; top:0; left:0; width:600px; height:50px; background:#F03; text-align:center; border:1px solid red;}
#foot{position:absolute; z-index:2; left:0; bottom:0; width:600px; height:50px; background: #FC6; text-align:center; border:1px solid #FC6;}
#content{position:absolute; z-index:1; top:50px; bottom:50px; left:0; width:600px; height:300px; overflow:hidden;border:1px solid red;}
#inner{width:999999px; overflow:hidden}
#inner>section{width:600px; height:100%; position:relative; z-index:1; float:left; overflow:auto;}
/*上拉下拉加载*/
.pullDown, .pullUp {background:#fff; height:40px; line-height:40px; padding:5px 10px; font-weight:bold; font-size:14px; color:#888;}
.pullDown .pullDownIcon, .pullUp .pullUpIcon { display:block; float:left; width:40px; height:40px; background:url(pull-icon@2x.png) 0 0 no-repeat; -webkit-background-size:40px 80px; background-size:40px 80px; -webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms;}
.pullDown .pullDownIcon { -webkit-transform:rotate(0deg) translateZ(0);}
.pullUp .pullUpIcon { -webkit-transform:rotate(-180deg) translateZ(0);}
.pullDown.flip .pullDownIcon { -webkit-transform:rotate(-180deg) translateZ(0);}
.pullUp.flip .pullUpIcon { -webkit-transform:rotate(0deg) translateZ(0);}
.pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon { background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
@-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); }}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript" src="flipsnap.js"></script>
<script type="text/javascript">
var flipsnap;
var num = '0';
var scrollDiv = '';
var scrollDiv_temp = 'div_';
var pullDownEl;
var pullDownOffset;
var pullUpEl;
var pullUpOffset;
var myScroll_3,myScroll_2,myScroll_1,myScroll;
jQuery(function() {
//初始化左右滑动区域，每次滑动600px，可滑动2次
flipsnap = Flipsnap('#inner',{distance: 600,maxPoint:2});
//获取可见窗口的高度，设置中间content的高度
var _height = document.body.clientHeight - 100;
jQuery("#content").css({'height':_height});
jQuery("#inner").css({'height':_height});
jQuery("#inner>section").css({'height':_height});
flipsnap.element.addEventListener('fsmoveend',function(){
num = flipsnap.currentPoint;
scrollDiv = scrollDiv_temp + num;
changePull(scrollDiv);
},false);
if(scrollDiv == '') {
scrollDiv = scrollDiv_temp + num;
changePull(scrollDiv);
}
});
//初始化iscrool滚动对象
function loaded() {
myScroll = new iScroll(scrollDiv,{
useTransition : true,
topOffset : pullDownOffset,
checkDOMChanges:true,
hideScrollbar:true,
vScrollbar:true,
hScrollbar:false,
fadeScrollbar:true,
momentum: false,
onRefresh : function() {
if (pullDownEl.className == "loading") {
pullDownEl.className = "";
pullDownEl.find(".pullDownLabel").text("下拉刷新...");
} else if (pullUpEl.className == "loading") {
pullUpEl.className = "";
pullUpEl.find(".pullUpLabel").text("上拉显示更多...");
}
},
onScrollMove : function() {
if (this.y > 5 && pullDownEl.className != "flip") {
pullDownEl.className = "flip";
pullDownEl.find(".pullDownLabel").text("准备刷新...");
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className == "flip") {
pullDownEl.className = "";
pullDownEl.find(".pullDownLabel").text("下拉刷新...");
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && pullUpEl.className != "flip") {
pullUpEl.className = "flip";
pullUpEl.find(".pullUpLabel").text("准备刷新...");
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className == "flip") {
pullUpEl.className = "";
pullUpEl.find(".pullUpLabel").text("上拉显示更多...");
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd : function() {
if (pullDownEl.className == "flip") {
pullDownEl.className = "loading";
pullDownEl.find(".pullDownLabel").text("Loading...");
//pullDownAction(param);
} else if (pullUpEl.className == "flip") {
pullUpEl.className = "loading";
pullUpEl.find(".pullUpLabel").text("上拉显示更多...");
pullUpEl.find('.pullUpLabel').text('Loading...');
pullUpAction(); //当到底部时再上拉时加载数据// Execute custom function (ajax call?)
}
}
});
};
function changePull(val){
pullDownEl = jQuery("#" + val + " .pullDown");
pullDownOffset = pullDownEl.height() + 10;
pullUpEl = jQuery("#" + val + " .pullUp");
pullUpOffset = pullUpEl.height() + 10;
myScroll.destroy();
setTimeout(loaded, 100);
};
function onRefresh(){
if (pullDownEl.className == "loading") {
pullDownEl.className = "";
pullDownEl.find(".pullDownLabel").text("下拉刷新...");
} else if (pullUpEl.className == "loading") {
pullUpEl.className = "";
pullUpEl.find(".pullUpLabel").text("上拉显示更多...");
}
};
function onScrollMove(){
if (this.y > 5 && pullDownEl.className != "flip") {
pullDownEl.className = "flip";
pullDownEl.find(".pullDownLabel").text("准备刷新...");
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className == "flip") {
pullDownEl.className = "";
pullDownEl.find(".pullDownLabel").text("下拉刷新...");
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && pullUpEl.className != "flip") {
pullUpEl.className = "flip";
pullUpEl.find(".pullUpLabel").text("准备刷新...");
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className == "flip") {
pullUpEl.className = "";
pullUpEl.find(".pullUpLabel").text("上拉显示更多...");
this.maxScrollY = pullUpOffset;
}
};
function onScrollEnd(){
if (pullDownEl.className == "flip") {
pullDownEl.className = "loading";
pullDownEl.find(".pullDownLabel").text("Loading...");
//pullDownAction(param);
} else if (pullUpEl.className == "flip") {
pullUpEl.className = "loading";
pullUpEl.find(".pullUpLabel").text("上拉显示更多...");
pullUpEl.find('.pullUpLabel').text('Loading...');
pullUpAction(); //当到底部时再上拉时加载数据// Execute custom function (ajax call?)
}
};
function pullUpAction() {//上拉事件，数据加载
setTimeout(function() {
jQuery("#" + scrollDiv + " .recordlist").after("新加载的数据</br>");
myScroll.refresh();
}, 1000);
};
// iscrool事件初始�
- 1
- 2
- 3
- 4
- 5
前往页