jq写的上拉刷新

最新推荐文章于 2024-03-17 17:28:50 发布

anchaqian9321

最新推荐文章于 2024-03-17 17:28:50 发布

阅读量208

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hyx626/p/10516231.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<style>
html,
body {}
</style>

<body>
    <div id="main">
        <ul id="container">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
</body>

</html>
<script>

var page = 0;
var loading = false; //是否处于加载状态,true则触发scroll事件也不在加载内容。
var finished = false;//是否已加载完成，ture则不在加载内容。

function loadData() {
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); //浏览器的高度加上滚动条的高度 

    if ($(document).height() <= totalheight) { //当文档的高度小于或者等于总的高度的时候,开始动态加载数据 
        //加载数据                                                                                                                                                                              
        page++;
        console.log("这里是第" + page + "页")

        $("#container").append("<li>我是新加载出来的数据</li><li>我是新加载出来的数据</li><li>我是新加载出来的数据</li><li>我是新加载出来的数据"+page+"</li>");
    }
}


$(window).scroll(function() {
    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); 
    console.log("页面的文档高度 :"+$(document).height()); 
    console.log('浏览器的高度:'+$(window).height()); 
    if(!loading){
        loadData();
    }
});
</script>

转载于:https://www.cnblogs.com/hyx626/p/10516231.html

anchaqian9321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq写的上拉刷新

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
复制链接

扫一扫