移动端滑动到底部事件

438 阅读1分钟

前言

关于节流函数和防抖函数,可以先看看这篇文章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)">&nbsp&nbsp&nbsp</li>
            <p id="status">&nbsp&nbsp&nbsp</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…