SUI 无限滚动多次触发infinite

使用无线滚动这个SUI的组件时，如果将列表拉倒最低端，轻微上下拖动，会在debug的network中看到网页发起多次请求

子文文 2019-08-01

收起

5回答

慕函数5323999 2019-12-13 02:37:55

老弟，不要那么麻烦，为何会发那么多请求呢？因为你加载完所有数据后滑动的时候，执行这个方法

$(document).on('infinite', '.infinite-scroll-bottom', function() {
   if(loading) return;
   addItems(pageSize, pageNum);
});

你只需在图一中$('.infinite-scroll-preloader').hide();后面加个return，当加载完所有数据后，直接跳出方法，这样loading就不执行下面的loading = false; 此时loading为true，那上面我贴的这个方法中if(loading) return; 随便你怎么滑，我都不执行下面的addItems(pageSize, pageNum); 也就不会一直发送请求啦，而且数据已经加载完了

收起回答

好帮手慕阿满 2019-08-01 17:52:26

问一下同学的问题解决了吗？

祝：学习愉快~

收起回答

提问者子文文 #1

解决了，老师有个地方可能没有注意到，可以考虑采纳我的这个方法

2019-08-02 00:41:27
好帮手慕珊回复提问者子文文 #2

嗯，非常棒，感谢分享！祝学习愉快！

2019-08-02 11:51:06

提问者子文文 2019-08-01 16:25:10

保留

if (total >= maxItems) {
$.detachInfiniteScroll($('.infinite-scroll'));
$('.infinite-scroll-preloader').remove();
return;
}

增加

function appendPreloader(){
var html = '<div class="infinite-scroll-preloader"><div class="preloader"></div></div>'
$.detachInfiniteScroll($('.infinite-scroll'));
$('.infinite-scroll-preloader').remove();
$.attachInfiniteScroll($('.infinite-scroll'));
$('.infinite-scroll').append(html);
}

在下面三个function中调用加入的appendPreloader

$('#shoplist-search-div').on(
'click',
'.button',
function(e) {
if (parentId) {// 如果传递过来的是一个父类下的子类
shopCategoryId = e.target.dataset.categoryId;
// 若之前已选定了别的category,则移除其选定效果，改成选定新的
if ($(e.target).hasClass('button-fill')) {
$(e.target).removeClass('button-fill');
shopCategoryId = '';
} else {
$(e.target).addClass('button-fill').siblings()
.removeClass('button-fill');
}
// 由于查询条件改变，清空店铺列表再进行查询
$('.list-div').empty();
appendPreloader();
// 重置页码
pageNum = 1;
addItems(pageSize, pageNum);
} else {// 如果传递过来的父类为空，则按照父类查询
parentId = e.target.dataset.categoryId;
if ($(e.target).hasClass('button-fill')) {
$(e.target).removeClass('button-fill');
parentId = '';
} else {
$(e.target).addClass('button-fill').siblings()
.removeClass('button-fill');
}
// 由于查询条件改变，清空店铺列表再进行查询
$('.list-div').empty();
// 重置页码
pageNum = 1;
addItems(pageSize, pageNum);
parentId = '';
}

});

$('#search').on('change', function(e) {
shopName = e.target.value;
$('.list-div').empty();
appendPreloader();
pageNum = 1;
addItems(pageSize, pageNum);
});

// 区域信息发生变化后，重置页码，清空原先的店铺列表，按照新的区域去查询
$('#area-search').on('change', function() {
areaId = $('#area-search').val();
$('.list-div').empty();
appendPreloader();
pageNum = 1;
addItems(pageSize, pageNum);
});

收起回答

提问者子文文 2019-08-01 16:02:51

同时把事件也加回来

$.attachInfiniteScroll(container) - 为指定的HTML元素容器添加无限滚动事件监听器 parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。
$.detachInfiniteScroll(container) - 从指定的HTML元素容器删除无限滚动事件监听器 parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。

收起回答