iscroll的上拉加载下拉刷新,急求解决方法

波西尼尼 2017-07-27 05:16:41
问题说明:
1.上拉加载内容的时候,如果这次加载出的内容比上一次加载的内容多,那么这次加载的内容就显示不完整。应该是JS计算了加载的内容容器的高度,这次加载的高度比上次加载的高度高了,所以显示不完全。如果每次加载内容一样多(内容容器高度一样),就没问题。请问如何修改,才能保证每次加载的内容不管多少,都能显示完内容?

2.上拉加载的时候,如何修改为接触到底部就进行加载?(目前为上拉到40PX时才进行加载)

页面代码:
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/pullToRefresh.js"></script>
<div id="wrapper">
<ul class="newsbody">
<li>
<div class="img"><img src="images/img1.jpg"></div>
<p class="p1">有春天的晚上,路过三里屯的人都很轻松|去看一个展</p>
</li>
<li>
<div class="img"><img src="images/img1.jpg"></div>
<p class="p1">有春天的晚上,路过三里屯的人都很轻松|去看一个展</p>
</li>
</ul>
</div>
<script>
refresher.init({
id:"wrapper",
pullDownAction:Refresh,
pullUpAction:Load
});
function Refresh() {
setTimeout(function () {
var el, li, i;
el =document.querySelector("#wrapper ul");
//这里写你的刷新代码
document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";
document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="刷新成功";
setTimeout(function () {
wrapper.refresh();
document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="";
},1000);//模拟qq下拉刷新显示成功效果
}, 1000);
}
function Load() {
setTimeout(function () {
var el, li, i;
el =document.querySelector("#wrapper ul");
for (i=0; i<10; i++) {
li = document.createElement('li');
li.innerHTML="<div class='img'><img src='images/img1.jpg'></div><p class='p1'>有春天的晚上,路过三里屯的人都很轻松|去看一个展</p>"
el.appendChild(li, el.childNodes[0]);
}
wrapper.refresh();
},300);
}
</script>

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 = "pullDownIcon";
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 = "pullUpIcon";
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 pullDownEle = wrapper.querySelector(".pullDown");
var pullDownOffset = pullDownEle.offsetHeight;
var pullUpEle = wrapper.querySelector(".pullUp");
var pullUpOffset = pullUpEle.offsetHeight;
this.scrollIt(parameter, pullDownEle, pullDownOffset, pullUpEle, pullUpOffset);
},
scrollIt: function(parameter, pullDownEle, pullDownOffset, pullUpEle, pullUpOffset) {
eval(
parameter.id + "= new iScroll(\
parameter.id,\
{\
useTransition: true,\
vScrollbar: false,\
topOffset: pullDownOffset,\
onRefresh: function () {\
refresher.onRelease(pullDownEle,pullUpEle);\
},\
onScrollMove: function () {\
refresher.onScrolling(this,pullDownEle,pullUpEle,pullUpOffset);\
},\
onScrollEnd: function () {\
refresher.onScrollEnd(pullDownEle,parameter.pullDownAction,pullUpEle,parameter.pullUpAction);\
}\
})"
);
},
onScrolling: function(e, pullDownEle, pullUpEle, pullUpOffset) {
if (e.y > -(pullUpOffset)&&!pullDownEle.className.match('loading')) {
pullDownEle.classList.remove("flip");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
pullDownEle.querySelector('.pullDownIcon').style.display = "block";
e.minScrollY = -pullUpOffset;
}
if (e.scrollerH < e.wrapperH &&e.y>e.maxScrollY-pullUpOffset&&pullUpEle.className.match("flip") || e.scrollerH > e.wrapperH &&e.y>e.maxScrollY-pullUpOffset&&pullUpEle.className.match("flip") ) {
pullUpEle.classList.remove("flip");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
}
if (e.y > 0&&!pullUpEle.className.match('loading')&&!pullDownEle.className.match('loading')) {
pullDownEle.classList.add("flip");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullingDownLable;
e.minScrollY = 0;
}
if (e.scrollerH < e.wrapperH && e.y < (e.minScrollY - pullUpOffset) &&!pullDownEle.className.match('loading')&&!pullUpEle.className.match('loading')|| e.scrollerH > e.wrapperH && e.y < (e.maxScrollY - pullUpOffset)&&!pullDownEle.className.match('loading')&&!pullUpEle.className.match('loading')) {
pullUpEle.classList.add("flip");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullingUpLable;
}

},
onRelease: function(pullDownEle, pullUpEle) {
if (pullDownEle.className.match('loading')) {
pullDownEle.classList.toggle("loading");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.pullDownLable;
}
if (pullUpEle.className.match('loading')) {
pullUpEle.classList.toggle("loading");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.pullUpLable;
}
},
onScrollEnd: function(pullDownEle, pullDownAction, pullUpEle, pullUpAction) {
if (pullDownEle.className.match('flip')&&!pullDownEle.className.match('loading')) {
pullDownEle.classList.add("loading");
pullDownEle.classList.remove("flip");
pullDownEle.querySelector('.pullDownLabel').innerHTML = refresher.info.loadingLable;
if (pullDownAction) pullDownAction();
}
if (pullUpEle.className.match('flip')&&!pullUpEle.className.match('loading')) {
pullUpEle.classList.add("loading");
pullUpEle.classList.remove("flip");
pullUpEle.querySelector('.pullUpLabel').innerHTML = refresher.info.loadingLable;
if (pullUpAction) pullUpAction();
}
}
}
...全文
138 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,909

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧