HTML列表的上拉加载更多

只是引用了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 = "
-- 上拉加载更多 --
"
; $("#load_more_content").remove(); for (var i = 0; i < 16; i++) { jsContent += "
PullUpLoadMore " + i + "
"
; } 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>

你可能感兴趣的:(其它)