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


Posted in HTML / CSS onNovember 19, 2019

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

首先要了解的知识 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()
                    })
                })
            })
        }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 #HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 #HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 #HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 #HTML / CSS
iframe跨域的几种常用方法
Nov 11 #HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 #HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 #HTML / CSS
You might like
php4的session功能评述(一)
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
宿舍违规用电检讨书
2014/02/16 职场文书
客户接待方案
2014/02/26 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
python如何在word中存储本地图片
2021/04/07 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS