移动端html5判断是否滚动到底部并且下拉加载

如何判断滚动是否滚动到了底部?

首先要了解的知识 scrollHeight,clientHeight,scrollTop

scrollHeight

只读属性,高度包括所有内容，包含内边距，但不把水平滚动条、边框和外边距算在内。

clientHeight

也是只读属性，没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度，包含内边距，不包括x轴的滚动条高度、边框、外边距;

同一种型号的手机上是不变的。

scrollTop

这个元素的顶部滚动距离(到视口(一般都是htML)的顶部的距离)。

可以实现计算到底部的距离了

计算是否到达底部原生js

element.scrollHeight - element.scrollTop === element.clientHeight

jquery

element..scrollHeight - element.scrollTop() == element.height()

实现下拉刷新

用到的是html+jq

VAR loadingstate = {
        text:false,        image:false,        video:false    }
    var httpUrl2 = "https://api.apioPEn.top/getJoke"    var options1 = {
        page:1,        count:10,        type:"text"    }
    var options2 = {
        page:1,        count:10,        type:"image"    }
    var options3 = {
        page:1,        count:10,        type:"video"    }
        //在window里获取不到options,就只能把options放在data对象里，就能用data['options'+(index+1)]获取到了    var data = {
        options1,options2,options3    }
    //请求语句所在    loadingState.text = true;
        textRender(options1);
//监听要滑动容器的滚动事件$('.content').scroll(function(e){
        var index = $(this).index();
        //获取滚动的距离        var sTop =  $('.content').eq(index).scrollTop();
        //获取容器的高度        var contentHeight = $('.content').eq(index).height();
        //获取滚动高度        var scrollHeight = $('.content').eq(index)[0].scrollHeight;
           //根据所选的不同options加载不同的内容        if(index==$(this).index()&
    &
loadingState.text!=true)         {
         //判断是否已经滚动底            if((sTop+contentHeight)==scrollHeight){
                    //当到达底部是加载选项为true,之后的操作                loadingState.text = true;
                //内容缓慢淡出                $(this).aniMATE({
                    scrollTop:sTop+80                }
    ,1000)                var options = data['options'+(index+1)];
                    //页数加一                options.page += 1;
                    //加载新获取的内容                textRender(options);
            }
        }
           }
//加载实现函数funtion textRender(obj){
    //要添加的内容    if(obj == options1){
                console.LOG(obj);
            $.get(httpUrl2,obj).then(function(res){
                            res.result.foreach(function(ITem,i){
                        var html = `                        div class="mui-card">
                                div class="mui-card-header mui-card-media">
                                img src="${
item.header}
    ">
                                    div class="mui-media-body">
                                    ${
item.name}
                                        p>
发表于 ${
item.passtime}
    /p>
                                    /div>
                                                                /div>
                                div class="mui-card-content">
                                    div class="mui-card-content-inner">
                                        p>
${
item.text}
    /p>
                                    /div>
                                /div>
                                div class="mui-card-footer">
                                    a class="mui-card-link">
    喜欢/a>
                                    a class="mui-card-link">
    评论/a>
                                /div>
                            /div>
                        `                    $('.content:eq(0)').append(html).css('backgroundImage',"none")                    loadingState.text = false;
                    $('.loading.text').stop(true).slideUp(2000,function(){
                        $('.loading.text').remove()                    }
)                }
)            }
)        }
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！