坑
body高度不能固定
如果scrollArea不是window 需在加载下方时动态获取下windowHeight
me.$scrollArea.on('scroll', function () {
me._scrollTop = me.$scrollArea.scrollTop();
if (me.opts.scrollArea != win) {
me._scrollWindowHeight = me.$scrollArea[0].clientHeight;
//重新获取局部区域高度
}
// console.log(me._scrollContentHeight, me._scrollWindowHeight)
// 滚动页面触发加载数据
if (me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)) {
loadDown(me);
}
});
如果实在弹框内部使用,应在弹框元素display:block之后调用drop()
上拉加载
var type = 0;
var page = 0;
var nums = 0;
var ajaxObject = null;
//type tab类型
function drop() {
// 页数
// 每页展示5个
var size = 5;
// dropload调用
$('.contents').dropload({
scrollArea: $('.drop'),
autoLoad: true,
//threshold: 45,
loadDownFn: function (me) {
// 拼接HTML
var result = '';
var data = {};
data.pageSize = size;
data.startRow = page * size;
data.onlyFriend = 0;
if (ajaxObject != null) {
ajaxObject.abort();
}
ajaxObject = $.ajax({
type: 'post',
data: JSON.stringify(data),
url: '/puzzleactivity/RankList',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
ajaxObject = null;
var length = data.totalCount;
var list = JSON.parse(data.list);
console.log(list)
if (length > 0) {
for (var i = 0; i < list.length; i++) {
nums++;
var TotalHelpTime = timeTransform(list[i].TotalHelpTime);
var RankTime = timeTransform(list[i].RankTime);
var MinTime = timeTransform(list[i].MinTime) + 's';
result += '<li class="tops_li"> '+
'<div style="width:68%;"> '+
'<img src="' + list[i].HeadImgUrl+'" /> '+
'<div class="tops_li_left dil"> '+
' <h3>' + list[i].NickName +'</h3> '+
' <p>通关时间 ' + RankTime +'</p> '+
' <p>助力时间 ' + TotalHelpTime +'</p> '+
'</div> '+
' </div> '+
'<div style="text-align:right;line-height:0.5rem"> '+
' <p style="color:#fff;font-size:14px;font-weight:bold;">' + list[i].UserRank+'</p> '+
' <p style="font-size:16px;">' + MinTime+'</p> '+
'</div> '+
'</li >';
}
page++
if (length < size || page * size >= length) {
me.lock();
me.noData()
}
// 如果没有数据
} else {
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试,延迟1秒加载
// setTimeout(function () {
// 插入数据到页面,放到最后面
$('#type_ul').append(result);
// 每次数据插入,必须重置
me.resetload();
// }, 1000);
},
error: function (xhr, type) {
//alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
}
});
}
网友评论