前端开发学习之上拉加载更多

最新推荐文章于 2024-05-11 20:24:01 发布

碎火流荧

最新推荐文章于 2024-05-11 20:24:01 发布

阅读量495

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/qq_21071977/article/details/81231846

版权

web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、使用到第三方的iscroll.js参考demo链接地址

2、在项目中导入iscroll.js

3、demo源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="iscroll.js"></script>
    <title>下拉加载更多</title>
    <style>
        body, html {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #wrapper {
            border: 1px solid red;
            width: 500px;
            height: 540px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        #wrapper ul {
            margin: 0px;
            padding: 0px;
            /*border: 1px solid blue;*/
            height: 500px;
            list-style-type: none;

        }

        #wrapper li {
            font-size: 24px;
        }

        .loadMore {
            height: 40px;
            line-height: 40px;
            font-size: 1.5em;
            background-color: LightGray;
            text-align: center;
            /*display: none;*/
        }
    </style>
</head>
<body οnlοad="pageLoad()">
<div id="wrapper">
    <div>
        <ul id="mylist">
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
            <li>青春永不变</li>
        </ul>
    </div>
    <div id="loadMore" class="loadMore">上拉加载更多..</div>
</div>
<!--js脚本-->
<script>
    var pageSize = parseInt("5");
    var pageIndex = parseInt("1");
    var g_count = parseInt("50");
//初始化页面
function pageLoad() {
        if (checkEnd()) {
            $(".loadMore").hide();
        } else {
            $(".loadMore").show();
        }
        if (g_count) {
            setTimeout(function () {
                intiScroll("wrapper", "loadMore", submit, checkEnd);
            }, 100);
        }
    }
    //检查数据是否加载完
    function checkEnd() {
        if (g_count <= pageIndex * pageSize) {
            return true;
        }
        else {
            return false;
        }
    }
    //模拟上拉加载更多的数据
    function submit(loadOver) {
        lastRow = $("#mylist").find("li:last")[0];
        $("#mylist").append("<li>+我是新添加的数据+</li>");
        pageIndex++;
        loadOver(lastRow);
    }
    //初始化iscroll
    var myScroll = null;
    function intiScroll(listId, loadMoreId, moreFunc, checkEndFunc) {
        var loadmore = $("#" + loadMoreId);
        myScroll = new iScroll(listId, {
            hScrollbar: true,
            vScrollbar: true,
            useTransition: false,
            topOffset: 0,
            topOffset: 0,
            onRefresh: function () {
                if (loadmore.attr('loading') == "ok") {
                    loadmore.attr('loading', "")
                    if (checkEndFunc()) {
                        loadmore.html('没有数据可加载了...');
                    } else {
                        loadmore.html('上拉加载更多...');
                    }
                }
            },
            onScrollMove: function () {
                var _tempY = this.maxScrollY - this.y + 30
                if (_tempY > 5 && _tempY < loadmore.height() && loadmore.attr('loading') == "ok") {
                    loadmore.attr('loading', "")
                    loadmore.html('上拉加载更多...');
                }
                else if (_tempY - 5 > loadmore.height()) {
                    if (checkEndFunc()) {
                        loadmore.attr('loading', "")
                        loadmore.html('没有数据可加载了...');
                    } else {
                        loadmore.attr('loading', "ok")
                        loadmore.html('松手开始更新...');
                    }
                }
            },
            onScrollEnd: function () {
                if (loadmore.attr('loading') == "ok") {
                    loadmore.attr('loading', "")
                    loadmore.html('正在加载...');
                    moreFunc(function (lastRow) {
                        if (checkEndFunc()) {
                            loadmore.html('没有数据可加载了...');
                        } else {
                            loadmore.html('上拉加载更多...');
                        }

                        var ul = $("#mylist")[0];
                        // var u2 = $("#wrapper");
                        // var ul  = document.getElementById("mylist");
                        var children = ul.childNodes;
                        var height = 0;
                        for (var i = 0; i < children.length; i++) {
                            if (children[i].tagName == "LI") height += children[i].offsetHeight;
                        }
                        if (height > 500) ul.style.overflowY = "auto";
                        myScroll.refresh(); 
                        myScroll.scrollToElement(lastRow, 1000);

                    });

                }
            }
        });
    }
</script>
</body>
</html>

碎火流荧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发学习之上拉加载更多

1、使用到第三方的iscroll.js参考demo链接地址2、在项目中导入iscroll.js3、demo源码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"
复制链接

扫一扫