移动端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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 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
跟我学Laravel之请求与输入
2014/10/15 PHP
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python 变量类型详解
2018/10/10 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
护理专业毕业生自荐信范文
2014/01/05 职场文书
优良学风班申请材料
2014/02/13 职场文书
优秀护士获奖感言
2014/02/20 职场文书
广告设计应届生求职信
2014/03/01 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技