移动端下拉刷新、上拉加载更多插件

最新推荐文章于 2023-11-02 19:17:39 发布

白鹭凡

最新推荐文章于 2023-11-02 19:17:39 发布

阅读量535

点赞数

分类专栏： h5 文章标签： css javascript jquery html5

本文链接：https://blog.csdn.net/weixin_43506403/article/details/108597457

版权

h5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

用了一上午时间找各种插件
开始找的iscroll 网上找了很多例子。测试了很几遍，可以上拉下拉但是就是不执行对应的方法。估计自己道行太浅了。后来终于找到了dropload 这个插件，简单好用。给大家推荐一下

<!doctype html>
<html lang="zh-cn">

<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>移动端下拉刷新、上拉加载更多插件 </title>
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <style>
        .content {
            max-width: 640px;
            margin: 0 auto;
            background-color: #fff;
        }
        
        .content .item {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            -webkit-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            align-items: center;
            padding: 3.125%;
            border-bottom: 1px solid #ddd;
            color: #333;
            text-decoration: none;
        }
        
        .opacity {
            -webkit-animation: opacity 0.3s linear;
            animation: opacity 0.3s linear;
        }
        
        @-webkit-keyframes opacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        @keyframes opacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
    <link rel="stylesheet" href="./css/dropload.css">
</head>

<body>

    <div class="content">
        <div class="lists">
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
            <h1>就当我是新闻页吧</h1>
        </div>
    </div>
    <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
    <script src="./js/common/zepto.min.js"></script>
    <script src="./js/common/dropload.min.js"></script>
    <script>
        $(function() {
            // 页数
            var page = 0;
            // 每页展示5个
            var size = 5;

            // dropload
            $('.content').dropload({
                scrollArea: window,
                threshold: 100, //提前加载距离
                loadUpFn: function(me) {
                    $.ajax({
                        type: 'GET',
                        url: 'http://ximan.github.io/dropload/examples/json/update.json',
                        dataType: 'json',
                        success: function(data) {
                            var result = '';
                            for (var i = 0; i < data.lists.length; i++) {
                                result += '<a class="item opacity" href="' + data.lists[i].link + '">' +
                                    '<img src="' + data.lists[i].pic + '" alt="">' +
                                    '<h3>' + data.lists[i].title + '</h3>' +
                                    '<span class="date">' + data.lists[i].date + '</span>' +
                                    '</a>';
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function() {
                                $('.lists').html(result);
                                // 每次数据加载完，必须重置
                                me.resetload();
                                // 重置页数，重新获取loadDownFn的数据
                                page = 0;
                                // 解锁loadDownFn里锁定的情况
                                me.unlock();
                                me.noData(false);
                            }, 1000);
                        },
                        error: function(xhr, type) {
                            console.log(xhr, type)
                                // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                },
                loadDownFn: function(me) {
                    page++;
                    // 拼接HTML
                    var result = '';
                    $.ajax({
                        type: 'GET',
                        url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                        dataType: 'json',
                        success: function(data) {
                            var arrLen = data.length;
                            if (arrLen > 0) {
                                for (var i = 0; i < arrLen; i++) {
                                    result += '<a class="item opacity" href="' + data[i].link + '">' +
                                        '<img src="' + data[i].pic + '" alt="">' +
                                        '<h3>' + data[i].title + '</h3>' +
                                        '<span class="date">' + data[i].date + '</span>' +
                                        '</a>';
                                }
                                // 如果没有数据
                            } else {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function() {
                                // 插入数据到页面，放到最后面
                                $('.lists').append(result);
                                // 每次数据插入，必须重置
                                me.resetload();
                            }, 1000);
                        },
                        error: function(xhr, type) {
                            console.log(xhr, type)
                                // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>

github : https://github.com/ximan/dropload
.

白鹭凡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端下拉刷新、上拉加载更多插件

用了一上午时间找各种插件开始找的iscroll 网上找了很多例子。测试了很几遍，可以上拉下拉但是就是不执行对应的方法。估计自己道行太浅了。后来终于找到了dropload 这个插件，简单好用。给大家推荐一下<!doctype html><html lang="zh-cn"><head> <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charse
复制链接

扫一扫

专栏目录