移动端下拉刷新、上拉加载更多插件dropload的使用

创建时间：2017-04-27 投稿人：浏览次数：3267

github地址：https://github.com/ximan/dropload
github上教程，demo，注意事项都写的很清晰。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/Public/css/dropload.css" >
    <title>demo</title>
</head>
<body>
    <div class="layout">
        <ul id="container">

        </ul>
    </div>
<script src="/Public/ljz/js/jquery.js"></script>
<script src="/Public/ljz/js/dropload.min.js"></script>
<script src="/Public/ljz/js/template.js"></script>

<script type="text/html" id="temp">
    {{if data}}
    {{each data as di i}}
    <li class="construct" >
        <p>**单位：{{di.dw}}</p>
    </li>
    {{/each}}
    {{/if}}
</script>
<script>
    $(function () {
        var rows = 10;
        var page = 1;
        $(".layout").dropload({
            loadDownFn: function (dl) {
                $.get("/demo/list", {
                    page: page,
                    rows: rows
                }, function (data) {
                    var d = $.parseJSON(data);
                    if (d.result == 1) {
                        if (d.data && d.data.length > 0) {
                            page++;
                            var lis = template("temp", d);//template.js模板返回的html
                            $("#container").append(lis);
                        } else {
                            dl.lock();//没有数据以后锁定
                            dl.noData(true);//标明没有数据了
                        }
                    }

                    dl.resetload();//不管成功失败，都要重置刷新  header footer
                });

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

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。