HTML列表的上拉加载更多

最新推荐文章于 2024-06-05 07:15:00 发布

RedWolfChao

最新推荐文章于 2024-06-05 07:15:00 发布

阅读量5.7k

点赞数 1

分类专栏：其它文章标签： html 上拉加载更多

本文链接：https://blog.csdn.net/RedWolfChao/article/details/78918858

版权

其它专栏收录该内容

7 篇文章 0 订阅

订阅专栏

只是引用了JQUERY写法 JQUERY请自行下载

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/12/27
  Time: 16:20
  列表的上拉加载更多写法
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>列表的上拉加载更多</title>
    <%--引入JQuery--%>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .red_list{
            height: 10rem;
            border: 1px solid #00bbd4;
            background-color: #ff2600;
            border-radius: 5px;
            text-align: center;
            font-size: 54px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .red_load_more_content{
            font-size: 54px;
            text-align: center;
        }
        #id_list {
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            padding:10px;
            overflow:auto;
        }
    </style>
</head>
<body>
<section id="id_list"></section>

<script>
    function loadMore() {
        var jsContent = "";
        var loadMoreContent = "<div id='load_more_content' class='red_load_more_content'>-- 上拉加载更多 --</div>";
        $("#load_more_content").remove();
        for (var i = 0; i < 16; i++) {
            jsContent += "<div class='red_list'>PullUpLoadMore " + i + "</div>";
        }
        jsContent+=loadMoreContent;
        $("#id_list").append(jsContent);
    }
    $(function(){
        loadMore();
    });
    //  监听指定组件滑动
    $("#id_list").scroll(function(){
        console.log("   $(\"this\").scrollHeight    " + $(this)[0].scrollHeight);
        console.log("   $(this).height()    " + $(this).height());
        console.log("   $(this)[0].scrollTop    " + $(this)[0].scrollTop);
        //  滑到底结果为->$(this)[0].scrollTop+$(this).height()+20=$(this)[0].scrollHeight
        //  60应该是一半的Item高度
        if($(this)[0].scrollTop+$(this).height()+20+60>=$(this)[0].scrollHeight){
            setTimeout(function(){
                loadMore();
            },1000)
        }
    });


</script>

</body>
</html>