具体代码:
var loadMore = function () {
let resList = [];
for (let i = 0; i < item; i++) {
resList.push(dataList[i]);
if(item > data_length){
$('.bottom_content').html("——沒有更多了——");
} else{
$('.bottom_content').html("——上拉加载更多——");
}
}
$('.query_list').html(resList);
}
$(document).ready(function() {
$("#sectors").prepend("<option value='选择界别' selected='selected'>选择界别</option>");
let data = {};
loadMore();
// 截取姓氏
$('.book_item').each(function () {
$(this).find('.surnames').text($(this).find('.book_name span').eq(0).text()[0])
});
let picker = document.getElementById('sectors');
picker.onchange = function () {
$('.picker').removeClass('active');
$('.list_item').removeClass('mui-active');
$('.list_item').text(picker.value);
$('.select_id').text($("#sectors option:selected").attr("id"));
console.log('id', $("#sectors option:selected").attr("id"));
data.subsector_id = $('.select_id').text();
$("#name_query").val('');
getList();
}
var getList = function () {
const url = '/home/index/book';
$.ajax({
url: url,
type: "get",
dataType: "text",
data: data,
async: false,
success: function (re) {
console.log('查询结果',$(re).find("li").length);
$(window).scroll(function(){
//当时滚动条离底部60px时开始加载下一页的内容
if (($(window).height() + $(window).scrollTop()) >= $(document).height()) {
$('.bottom_content').html("——沒有更多了——");
}
})
$('.query_list').html($(re).find("ul").html());
$('.book_item').each(function () {
$(this).find('.surnames').text($(this).find('.book_name span').eq(0).text()[0])
});
},
error: function () {
console.log('请求失败')
},
beforeSend: function (request) {
// layer.msg('正在加载数据请稍后。。。');
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}
});
}
});
$(window).scroll(function(){
//当时滚动条离底部60px时开始加载下一页的内容
if (($(window).height() + $(window).scrollTop()) >= $(document).height()) {
clearTimeout(timers);
//这里还可以用 [ 延时执行 ] 来控制是否加载 (这样就解决了 当上页的条件满足时,一下子加载多次的问题啦)
timers = setTimeout(function () {
item += 10;
if(! $('.select_id').text()){
loadMore(); //调用执行上面的加载方法
}
}, 300);
}
});