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

Posted 冰泪恋心

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)