移动端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制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP生成Flash动画的实现代码
2010/03/12 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
动态加载js和css(外部文件)
2013/04/17 Javascript
AngularJS语法详解
2015/01/23 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python解析xml文件实例分析
2015/05/27 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python统计单词出现的次数
2018/04/04 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
2014年档案管理工作总结
2014/11/17 职场文书
市场督导岗位职责
2015/04/10 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL