jQuery基于iscroll.js手机移动端触屏滑动下拉刷新上拉加载代码,简单实用的文字列表下拉刷新和上拉加载效果。
js代码
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/iscroll-probe.js"></script>
<script>
var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
var scale = 1/window.devicePixelRatio;
var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
document.getElementById("vp").content = mstr;
</script>
<script>
var myScroll;
myScroll = new IScroll('#wrapper', {
probeType: 2,
fadeScrollbars: false
});
var pullDown = 1; // 下拉刷新避免多次执行
var pullUp = 1; // 上拉加载避免多次执行
var downHeight = $(".pullDown").height();
var upHeight = $(".pullUp").height();
myScroll.on('scroll', function(){
var y = myScroll.y;
// 下拉加载
if(y >= downHeight && pullDown){
$(".pullDown").addClass("refresh").html("松开刷新...");
myScroll.minScrollY = downHeight;
pullDown = 0;
}
if(y <= downHeight && y >= 0 && !pullDown){
$(".pullDown").removeClass("refresh").html("下拉刷新...");
pullDown = 1;
myScroll.minScrollY = 0;
}
// 上拉刷新
var maxHeight = myScroll.maxScrollY;
if(y < (maxHeight - upHeight) && pullUp){
$(".pullUp").addClass("loading").html("松开加载...");
myScroll.maxScrollY = maxHeight - upHeight;
pullUp = 0;
}
if(y > maxHeight && y < (maxHeight + upHeight) && !pullUp){
$(".pullUp").removeClass("loading").html("上拉加载...");
myScroll.maxScrollY = maxHeight + upHeight;
pullUp = 1;
}
});
myScroll.on('scrollEnd', function(){
if($(".pullDown").hasClass("refresh")){
$(".pullDown").text("正在刷新...");
common.loadingShow();
setTimeout(function(){
location.reload();
}, 2000);
}
if($(".pullUp").hasClass("loading")){
$(".pullUp").text("正在加载...");
setTimeout(function(){
add();
myScroll.refresh();
}, 1000);
}
});
myScroll.on('refresh', function(){
$(".pullUp").removeClass("loading").html("上拉加载...");
pullUp = 1;
});
// 向列表添加数据
function add(){
common.loadingShow();
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var html = $.map(arr, function(item, index){
return "<li>我是加载的第"+(index+1)+"条数据</li>"
}).join("");
$(".dataLine").append(html);
common.loadingHide();
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791