使用iscroll做了了上拉加载,但是加载出来的内容,无法滑动到最底部

xu747620694 2016-08-28 03:59:45
使用iscroll做了了上拉加载,但是加载出来的内容,无法滑动到最底部,意思就是如果有三页数据的话,第二页是可以上拉一点的,但是滑不到底部,然后就又刷新了。
烦请各位大神给指条明路!尽量说详细点。
所有分都给了
页面:
<div class="content">
<div id="wrapper" >
<div id="scroller" style="overflow:hidden">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel"></span>
</div>

<div class="announce-box" id="notice_list"></div>
<div class="more" id="getmore" ></div>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
</div>
</div>
</div>
</div>

js:
var myScroll,datatotal,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;

/**
* 下拉刷新 (自定义实现此方法)
* myScroll.refresh();
*/
function pullDownAction () {
location.reload();
}

/**
* 滚动翻页 (自定义实现此方法)
* myScroll.refresh();
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var phone = $("#phoneno").val();
if($(".announce-box").length==datatotal){
finedo.message.hidewaiting();//关闭遮罩层
myScroll.refresh();
return;
}
pageindex++;
$.ajax({
type : "POST",
url : ctx+"/finedo/traderecord/queryinfo",
async : false,
data : {
page : pageindex,
rows : rows,
phone : phone
},
dataType : "json",
success : function(data){
$("#pullUp").show();
var datatotal = data.total;//信息总条数
totalpage = Math.ceil(parseInt(datatotal) / parseInt(rows));//总页数
var datarows = [];
datarows = data.rows;
if(pageindex>totalpage){
$("#getmore").html("");
$("#pullUp").hide();

}else{
var datalength = datarows.length;
if(datalength==0){
$("#notice_list").html("<h3 style='text-align:center;'>暂无信息!</h3>");
$("#getmore").html("");
//数据加载完成,遮板消失
finedo.message.hidewaiting();
}else{
//列表显示公告信息
var table = "";
var table = "<div class='announce-box'>";
for (var i = 0; i < datalength; i++) {
var tradeid = datarows[i]["tradeid"];
var type = datarows[i]["recordtype"];
if (type == '0') {
type = "登录消息";
}else if(type == '1'){
type = "缴费消息";
}else if(type == '2'){
type = "投诉消息";
}else if(type == '3'){
type = "报修消息";
}else if(type == '4'){
type = "房源信息更新";
}else if(type == '5'){
type = "管理员审核消息";
}
var addtime = datarows[i]["addtime"].substring(0,10);
var isread = datarows[i]["isread"];
table+="<table width='100%' class='announce-delete' onclick='opennotice(\""+tradeid+"\");'>";
table+= "<tr>";
table+= "<td width='20'></td>";
//判断是否已读,显示不同图标
if(isread=="Y"){
table+= "<td width='15%'><img width='33' src='"+ctx+"/app/images/announce_04.png'></td>";
}else{
table+= "<td width='15%'><img width='33' src='"+ctx+"/app/images/announce_03.png'></td>";
}
table+= "<td width='50%'>"+type+"</td>";
table+= "<td style='text-align:right'><span>"+addtime+"</span></td>";
table+= "<td width='20'></td>";
table+= "</tr>";
table+= "</table>";
}
table+="</div>";
$("#notice_list").append(table);
if (datalength == 0) {
$("#pullUp").css("display","none");
}
//数据加载完成,遮板消失
finedo.message.hidewaiting();
}
}
}
});
myScroll.refresh(); // 数据加载完成后,调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

/**
* 初始化iScroll控件
*/
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;

myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar',
useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction();
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction();
}
}
});

setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);


var initScroll = function () {
intervalTime = setInterval(function () {
var resultContentH = $("#notice_list").height();
if (resultContentH > 0) { //判断数据加载完成的条件
console.log("此时notice_list的高度是:" + resultContentH);
$("#notice_list").height(resultContentH)
setTimeout(function () {
clearInterval(intervalTime);
myScroll = new iScroll('scroller');
}, 1000)
}
}, 10);
}
...全文
2776 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_37652883 2017-12-18
  • 打赏
  • 举报
回复
为什么我还是不行
mar-mar 2017-03-05
  • 打赏
  • 举报
回复
$.ajax({ url: "GetData.ashx", type: "post", success: function (content) { setTimeout(function () { $("#contentList1").append(content).listview('refresh'); myScroll.refresh(); }, 400); } }) 今晚貌似被我无意中搞掂了,如上
qq_34694802 2016-11-17
  • 打赏
  • 举报
回复
请问你这个问题解决了吗

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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