您的位置：首页 > Web前端 > JavaScript

最新的 iscroll5 下拉刷新上拉加载以及首次加载内容不足时的下拉上拉补充

2017-11-28 18:12 477 查看

申明：虽然本文章为原创，但是很大部分还是用回原来iscroll5之前的上拉下拉以及内容不足时的解决方法，参考了一些网友提供的代码

1：iscroll 5之前的点击事件会触发多次--最后有网友提出：时间戳解决了-

虾米我发现iscroll5 已经解决了这个问题-于是快快写个博客发表一下先-毕竟虾米我一直用的是4.25版本的，

官网下载 http://cubiq.org/iscroll-5 下载个依赖：iscroll-probe.js 在下载的包中

2.当-初次加载内容不足以填充时屏幕时，无法上下拉

解决方法：--设置一个最少高度-足以上拉下拉

上代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>iScroll demo: click</title>
<script src="../../../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../build/iscroll-probe.js"></script>
<!--<script type="text/javascript" src="../demoUtils.js"></script>-->

<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html {
-ms-touch-action: none;
}

body,
ul,
li {
padding: 0;
margin: 0;
border: 0;
}

body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden;
/* this is important to prevent the whole page to bounce */
}

#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}

#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}

#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}

#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}

#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}

#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}

#pullDown,
#pullUp,
.pulldown-tips {
height: 40px;
line-height: 40px;
text-align: center;
}

.pulldown-tips {
position: absolute;
top: -40px;
left: 0;
width: 100%;
}
</style>
</head>

<body onload="load()">
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class="">
<div class="pullDownLabel"></div>
</div>
<div class="pulldown-tips">下拉刷新</div>
<ul id="list">

</ul>
<div id="pullUp" class="">
<div class="pullUpLabel">加载更多</div>
</div>
</div>
</div>

<div id="footer"></div>

</body>

<script type="text/javascript">
function asd(obj){
alert($(obj).attr('pid'));
}
function load() {
var html = '';
for (var i =0;i<15;i++) {
html+='<li onclick="asd(this)">'+i+'</li>'
}
$("#list").append(html)
$("#list li").each(function(ide){
$(this).attr('pid',ide);
})
var windowH = $(window).height();
var titHeight = $('#header').height();
var footer = $('#footer').height();
var contentH = windowH - titHeight ;
var contentHfooter = windowH - titHeight-footer;
if ($("#list").height()<contentHfooter) {
$("#list").css({
'min-height':contentHfooter
})
}

var myScroll,
pullDown = $("#pullDown"),
pullUp = $("#pullUp"),
pullDownLabel = $(".pullDownLabel"),
pullUpLabel = $(".pullUpLabel"),
container = $('#list'),
loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
pullDown.hide();
pullUp.hide();

myScroll = new IScroll("#wrapper", {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
scrollY: true,
probeType: 2,
bindToWrapper: true
});
myScroll.on("scroll", function() {
if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')) {
if(this.y > 40) { //下拉刷新操作
$(".pulldown-tips").hide();
pullDown.addClass("refresh").show();
pullDownLabel.text("松手刷新数据");
loadingStep = 1;
myScroll.refresh();
} else if(this.y < (this.maxScrollY - 14)) { //上拉加载更多
pullUp.addClass("refresh").show();
pullUpLabel.text("正在载入");
loadingStep = 1;
pullUpAction();
}
}
});
myScroll.on("scrollEnd", function() {
if(loadingStep == 1) {
if(pullDown.attr("class").match("refresh")) { //下拉刷新操作
pullDown.removeClass("refresh").addClass("loading");
pullDownLabel.text("正在刷新");
loadingStep = 2;
pullDownAction();
}
}
});

function pullDownAction() {
setTimeout(function() {
var li, i;
for(i = 0, li = ""; i < 3; i++) {
li += "<li onclick='asd(this)'>"+i+"</li>";
}
container.prepend(li);
pullDown.attr('class', '').hide();
myScroll.refresh();
loadingStep = 0;
$(".pulldown-tips").show();
$("#list li").each(function(ide){
$(this).attr('pid',ide);
})
}, 1000);
}

function pullUpAction() {
setTimeout(function() {
var li, i;
for(i = 0, li = ""; i < 3; i++) {
li += "<li onclick='asd(this)'>"+i+"</li>";
}
container.append(li);
pullUp.attr('class', '').hide();
myScroll.refresh();
loadingStep = 0;
$("#list li").each(function(ide){
$(this).attr('pid',ide);
})
}, 1000);
}
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
}
</script>

</html>

以上下了依赖的iscroll-probe.js 还有 jq 引入你的代码就可以运行了

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 上拉下拉 iscroll.js iscroll5内容不足 iscroll点击触发

相关文章推荐

新的分享

章节导航

最新的 iscroll5 下拉刷新上拉加载以及 首次加载内容不足时的下拉上拉补充

最新的 iscroll5 下拉刷新上拉加载以及首次加载内容不足时的下拉上拉补充