移动端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中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
HTML通过表单实现酒店筛选功能
May 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
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python动态加载包的方法小结
2016/04/18 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
高三高考决心书
2014/03/11 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
Go语言编译原理之源码调试
2022/08/05 Golang