文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

小编给大家分享一下移动端html5如何判断是否滚动到底部并且下拉加载,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

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

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

scrollHeight

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


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

clientHeight

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

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

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

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()
                    })
                })
            })
        }
}

看完了这篇文章,相信你对“移动端html5如何判断是否滚动到底部并且下拉加载”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯