前言
关于节流函数和防抖函数,可以先看看这篇文章juejin.cn/post/684490…
html
最外层div设置了固定高度
<div id="datas">
<div id="container">
<ul v-for="dto in stuList" :style="'background:' + dto.backGround">
<img :src="dto.photPath" onerror="this.src='../img/logo2.png'" class="img1">
<img src="../img/redSmile.png" class="img2">
<li style="font-weight: bold" @click="toF21018(dto.stuId,dto.absSts)">   </li>
<p id="status">   </p>
</ul>
</div>
</div>
事件函数
throttle = function (atleast) {
var timer = null;
var previous = null;
return function () {
var now = +new Date();
if ( !previous ) previous = now;
if ( atleast && now - previous > atleast ) {
if ($('#datas').scrollTop() + $('#datas').height() + ($(window).height() * 0.1) >= $('#container').height()){
alert('loadMore');
}
// 重置上一次开始时间为本次结束时间
previous = now;
clearTimeout(timer);
} else {
clearTimeout(timer);
timer = setTimeout(function() {
if ($('#datas').scrollTop() + $('#datas').height() + ($(window).height() * 0.1) >= $('#container').height()){
alert('loadMore');
}
previous = null;
}, 500);
}
}
};
设置事件
$('#datas').scroll(null, throttle(200));
参考
www.zhihu.com/question/31…
keelii.com/2016/06/11/…
blog.csdn.net/sinat_19327…