下拉刷新，上拉加载功能--dropload.js的使用

Posted 2020-11-01 冰泪恋心

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉刷新，上拉加载功能--dropload.js的使用相关的知识，希望对你有一定的参考价值。

　　这段时间工作太忙了，没时间更新博客内容，在这段时间，也学习到了不少新的知识。今天先整理一下dropload.js的使用方法吧，这个是在为项目中使用过的插件，很好用，但是真正用到项目中还是会有一些小小的问题，这个要具体问题具体分析了。

　　插件下载地址：https://github.com/ximan/dropload。大家也可以直接看源码

我的代码地址: https://github.com/dreamITGirl/projectStudy,大家可以在里面查找。

　　首先，这个插件是依赖于jQuery或Zepto的，所以，使用时需要引入它们其中之一。

　　先说一下上拉加载功能吧----用户在上拉到数据底部时，会触发上拉加载，向服务器请求新的数据，并渲染出来。

　　代码：只有下拉刷新功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <title>下拉刷新</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/dropload.css">
    <style>
        html {
            font-size: 14px;
        }

        .container {
            width: 100%;
            height: auto;
        }

        .header {
            width: 100%;
            height: 4rem;
            background: #dddddd;
            color: #080808;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            line-height: 4rem;
            text-align: center;
        }

        .clear {
            content: "";
            width: 100%;
            height: 4rem;
        }

        .list {
            background: #fff;
        }

        .list-item {
            display: flex;
            height: 5rem;
            line-height: 2;
            border-bottom: 1px solid #dddddd;
        }

        ul .list-item:last-child {
            border: none;
        }

        .imgStyle {
            width: 3rem;
            height: 3rem;
            border: 1px solid #ddd;
            margin: .5rem;
        }

        .list-item div {
            width: 57%;
            word-break: break-word;
            color: #333;
            margin-right: .5rem;
        }

        .dates {
            margin-top: 1.6rem;
            color: #999;
        }
    </style>
</head>
<body>
<div class="header">标题部分</div>
<div class="clear"></div>
<div class="container">
    <ul class="list"></ul>
</div>
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/dropload.js"></script>
<script>
    $(function () {
        var page = 0;
        var pageSize = 5;
        //dropload
        $(‘.container‘).dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                page++;
                var html = "";
                $.ajax({
                    type: ‘get‘,
                    url: ‘http://ons.me/tools/dropload/json.php?page=‘ + page + ‘&size=‘ + pageSize,
                    dataType: ‘json‘,
                    success: function (data) {
                        console.log(data);
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                html += `<li class="list-item">
                                                <img src="${data[i].pic}" class="imgStyle">
                                                <div class="pro_title">${data[i].title}</div>
                                                <p class="dates">${data[i].date}</p>
                                            </li>`
                            }

                        } else {
                            me.lock();
                            me.noData();
                        }
                        setTimeout(function () {
                            $(‘.list‘).append(html);
                            me.resetload();//每次追加完数据后重置
                        }, 10)

                    },
                    error: function (err) {
                        console.log(err);
                        me.resetload();//失败了也要重置
                    }
                })
            }

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

其二：下拉加载和上拉刷新

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <title>下拉刷新+上拉加载</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/dropload.css">
    <style>
        html {
            font-size: 14px;
        }

        .container {
            width: 100%;
            height: auto;
        }

        .header {
            width: 100%;
            height: 4rem;
            background: #dddddd;
            color: #080808;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            line-height: 4rem;
            text-align: center;
        }

        .clear {
            content: "";
            width: 100%;
            height: 4rem;
        }

        .list {
            background: #fff;
        }

        .list-item {
            display: flex;
            height: 5rem;
            line-height: 2;
            border-bottom: 1px solid #dddddd;
        }

        ul .list-item:last-child {
            border: none;
        }

        .imgStyle {
            width: 3rem;
            height: 3rem;
            border: 1px solid #ddd;
            margin: .5rem;
        }

        .list-item div {
            width: 57%;
            word-break: break-word;
            color: #333;
            margin-right: .5rem;
        }

        .dates {
            margin-top: 1.6rem;
            color: #999;
        }
    </style>
</head>
<body>
<div class="header">标题部分</div>
<div class="clear"></div>
<div class="container">
    <ul class="list"></ul>
</div>
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/dropload.js"></script>
<script>
    $(function () {
        var page = 0;
        var pageSize = 5;
        $(‘.container‘).dropload({
            scrollArea: window,
            domUp: {//编写刷新的样式内容
                domClass: ‘droplaod-up‘,
                domRefresh: ‘<div class="dropload-refresh">刷新</div>‘,
                domUpdate: ‘<div class="dropload-update">释放更新数据</div>‘,
                domLoad: ‘<div><span class="loading"></span>加载中,请耐心等待</div>‘
            },
            domDown: {//编写加载数据的样式内容
                domClass: ‘dropload-down‘,
                domRefresh: ‘<div class="dropload-refresh">加载更多</div>‘,
                domLoad: ‘<div><span class="loading"></span>加载中,请耐心等待</div>‘,
                dropNoData: ‘<div class="dropload-noData">暂无更多数据</div>‘
            },
            loadDownFn: function (me) {
                page++;
                var html = "";
                $.ajax({
                    type: ‘get‘,
                    url: ‘http://ons.me/tools/dropload/json.php?page=‘ + page + ‘&size=‘ + pageSize,
                    dataType: ‘json‘,
                    success: function (data) {
                        console.log(data);
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                html += `<li class="list-item">
                                                <img src="${data[i].pic}" class="imgStyle">
                                                <div class="pro_title">${data[i].title}</div>
                                                <p class="dates">${data[i].date}</p>
                                            </li>`
                            }

                        } else {
                            me.lock();
                            me.noData();
                        }
                        setTimeout(function () {
                            $(‘.list‘).append(html);
                            me.resetload();//每次追加完数据后重置
                        }, 10)

                    },
                    error: function (err) {
                        console.log(err);
                        me.resetload();//失败了也要重置
                    }
                })
            },
            loadUpFn: function (me) {
                $.ajax({
                    type: ‘get‘,
                    url: ‘../json/update.json‘,
                    dataType: ‘json‘,
                    success: function (data) {
                        console.log(data);
                        var str = "";
                        for (var j = 0; j < data.lists.length; j++) {
                            str += `<li class="list-item">
                                                <img src="${data.lists[j].pic}" class="imgStyle">
                                                <div class="pro_title">${data.lists[j].title}</div>
                                                <p class="dates">${data.lists[j].date}</p>
                                            </li>`;
                        }
                        setTimeout(function () {
                            $(‘.list‘).html(str);
                            me.resetload();//每次加载完数据后重置
                            page = 0;
                            me.unlock();//解锁loadDownFn中的内容
                            me.noData(false)
                        }, 10)
                    },
                    error: function (err) {
                        console.log(err);
                        me.resetload();//每次加载完数据后重置
                    }
                })
            },
            threshold: 50

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

最后，在具有tab切换功能时，有下拉加载功能

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <title>tab切换加载更多数据</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/dropload.css">
    <style>
        html {
            font-size: 14px;
        }

        .container {
            width: 100%;
            height: auto;
        }

        .header {
            width: 100%;
            height: 4rem;
            background: #dddddd;
            color: #080808;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            line-height: 4rem;
            text-align: center;
        }

        .clear {
            content: "";
            width: 100%;
            height: 4rem;
        }

        .list, .list2 {
            background: #fff;
        }

        .list-item, .list2-item {
            display: flex;
            height: 5rem;
            line-height: 1.5;
            border-bottom: 1px solid #dddddd;
        }

        ul .list-item:last-child {
            border: none;
        }

        .imgStyle {
            width: 3rem;
            height: 3rem;
            border: 1px solid #ddd;
            margin: .5rem;
        }

        .list-item div {
            width: 57%;
            word-break: break-word;
            color: #333;
            margin-right: .5rem;
        }

        .dates {
            margin-top: 1.6rem;
            color: #999;
        }

        .tab {
            display: flex;
            width: 100%;
            height: 3rem;
            line-height: 3rem;
        }

        .item {
            display: inline-block;
            width: 50%;
            height: 3rem;
            text-align: center;
            text-decoration: none;
            color: #000000;
        }

        .cur {
            border-bottom: 2px solid #d43f3a;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="header">标题部分</div>
<div class="clear"></div>
<div class="tab">
    <a href="javascript:;" class="item cur">手机菜单一</a>
    <a href="javascript:;" class="item">手机菜单二</a>
</div>
<div class="container">
    <ul class="list"></ul>
    <ul class="list2 hide"></ul>
</div>
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/dropload.js"></script>
<script>
    var tab1Load = false;
    var tab2Load = false;
    var tabIndex = 0;
    var pageStart = 0;
    var pageEnd;
    //切换菜单事件
    $(‘.tab‘).on(‘click‘, ‘.item‘, function () {
        var index = $(this).index();
        tabIndex = index;
        console.log(tabIndex);
        $(this).addClass(‘cur‘).siblings().removeClass(‘cur‘);
        $(this).parent().siblings(‘.container‘).children().eq(index).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        if (tabIndex == ‘0‘) {
            console.log(tab1Load, tab2Load);
            if (!tab1Load) {
                dropload.unlock();
                dropload.noData(false)
            } else {
                dropLoad.look(‘down‘);
                dropLoad.noData();
            }
        } else {
            if (!tab2Load) {
                dropLoad.unlock();
                dropLoad.noData(false)
            } else {
                dropLoad.look(‘down‘);
                dropLoad.noData();
            }
        }
        dropLoad.resetload()
    });
    //下拉刷新和上拉加载
    var page = 0;
    var pageSize = 5;
    var counter = 0;
    var dropLoad = $(‘.container‘).dropload({
        scrollArea: window,
        loadDownFn: function (me) {
            counter++;
            console.log(tabIndex);
            console.log(tabIndex);
            if (tabIndex == 0) {
                $.ajax({
                    type: ‘get‘,
                    url: ‘../json/more.json‘,
                    dataType: ‘json‘,
                    success: function (data) {
                        console.log(data);
                        var str = "";
                        pageStart = pageSize * counter;
                        pageEnd = data.lists.length;
                        for (var j = pageStart; j < pageEnd; j++) {
                            str += `<li class="list-item">
                                                                <img src="${data.lists[j].pic}" class="imgStyle">
                                                                <div class="pro_title">${data.lists[j].title}</div>
                                                                <p class="dates">${data.lists[j].date}</p>
                                                            </li>`;
                            if ((j + 1) > data.lists.length) {
                                tab1Load = true;
                                me.look();
                                me.noData();
                                break;
                            }
                        }
                        ;
                        setTimeout(function () {
                            $(‘.list‘).append(str);
                            me.unlock();
                            me.resetload();
                        }, 0)
                    },
                    error: function (err) {
                        console.log(err);
                        me.resetload()
                    }
                })
            } else {
                var html = "";
                $.ajax({
                    type: ‘get‘,
                    url: ‘../json/update.json‘,
                    dataType: ‘json‘,
                    success: function (data) {
                        console.log(data);
                        for (var i = 0; i < data.lists.length; i++) {
                            html += `<li class="list-item">
                                                                <img src="${data.lists[i].pic}" class="imgStyle">
                                                                <div class="pro_title">${data.lists[i].title}</div>
                                                                <p class="dates">${data.lists[i].date}</p>
                                                            </li>`;
                        }
                        setTimeout(function () {
                            $(‘.list2‘).append(html);
                            me.resetload();
                        }, 0)
                    },
                    error: function (data) {
                        me.resetload();
                    }
                })
            }

        }
    })

</script>
</body>
</html>

以上是关于下拉刷新，上拉加载功能--dropload.js的使用的主要内容，如果未能解决你的问题，请参考以下文章

iOS 下拉刷新和上拉加载更多效果原理

mui实现移动端上拉加载下拉刷新功能

7-5 高级功能列表下拉刷新与上拉加载更多功能实现

mui 框架中结合mui.ajax实现下拉刷新和上拉加载功能

微信小程序实现上拉加载下拉刷新（即粘即用）

微信小程序上拉加载和下拉刷新（wepy）