跳至正文

jQuery WEUI 滚动加载不触发

  • 前端

官方默认的滚动加载的容器是 document.body

var loading = false; //状态标记
$(document.body).infinite().on("infinite", function() {
	if(loading) return;
	loading = true;
	setTimeout(function() {
		$("#list").append("<p> 我是新加载的内容 </p>");
		loading = false;
	}, 1500); //模拟延迟
});

在实际应用中,在初始化的时候,需要根据自身情况,去绑定当前选中界面的元素来操作,将滚动加载的容器修改为自己的元素 $(‘.page__bd’)

var loading = false; //状态标记
$('.page__bd').infinite().on("infinite", function() {
	if(loading) return;
	loading = true;
	setTimeout(function() {
		$("#list").append("<p> 我是新加载的内容 </p>");
		loading = false;
	}, 1500); //模拟延迟
});

修改之后,重点需要设置$(‘.details’)元素的高度(height),并且设置overflow:auto;
否则会造成滚动加载不触发。

<div class="page__bd" style="overflow:auto; height: 100%;">
标签: