mescroll下拉刷新-上来加载测试

原创
2017/08/25 18:12
阅读数 4.8K
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>xxxxxxxx</title>


    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../mescroll.css">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: white
        }

        ul {
            list-style-type: none
        }

        a {
            text-decoration: none;
            color: #18B4FE;
        }

        /*模拟的标题*/
        .header {
            z-index: 9990;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-bottom: 1px solid #eee;
            background-color: white;
        }

        .header .btn-left {
            position: absolute;
            top: 0;
            left: 0;
            padding: 12px;
            line-height: 22px;
        }

        .header .btn-right {
            position: absolute;
            top: 0;
            right: 0;
            padding: 0 12px;
        }

        /*说明*/
        .mescroll .notice {
            font-size: 14px;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            text-align: center;
            color: #555;
        }

        /*列表*/
        .mescroll {
            position: fixed;
            top: 44px;
            bottom: 0;
            height: auto;
        }

        /*展示上拉加载的数据列表*/
        .news-list li {
            padding: 16px;
            border-bottom: 1px solid #eee;
        }

        .news-list .new-content {
            font-size: 14px;
            margin-top: 6px;
            margin-left: 10px;
            color: #666;
        }
    </style>

</head>
<body>

<!--滑动区域-->
<div id="mescroll" class="mescroll">
    <p class="notice">下拉刷新: 添加新数据到列表顶部</p>
    <ul id="newsList" class="news-list">
        <!--<li>
            <p>【新闻1】标题标题标题标题</p>
            <p class="new-content">内容内容内容内容内容内容内容内容内容</p>
        </li>-->
    </ul>
</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../mescroll.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript" charset="utf-8">


    $(function () {


        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
            //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
            //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
            down: {
                callback: downCallback //下拉刷新的回调
            },
            up: {
                auto: true,
                page: {
                    num: 0,
                    size: 15,
                    time: null
                },
                callback: upCallback //上拉加载的回调
            }
        });


        //下拉刷新的回调
        function downCallback() {
            $.ajax({
                url: 'test.php',
                success: function (data) {
                    //联网成功的回调,隐藏下拉刷新的状态;
                    mescroll.endSuccess(); //无参
                    //设置数据
                    //setXxxx(data);//自行实现 TODO
                },
                error: function (data) {
                    //联网失败的回调,隐藏下拉刷新的状态
                    mescroll.endErr();
                }
            });
        }

        //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
        function upCallback(page) {
            $.ajax({
                url: 'test.php?page=' + page.num + "&size=" + page.size,
                success: function (data) {
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //参数data.length:当前页的数据总数
                    //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
                    //列表如果无下一页数据,则提示无更多数据;
                    //如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态

                    var jsondata = eval('(' + data + ')');

                    var data = jsondata.data;


                    mescroll.endSuccess(data.length);

                    //设置列表数据
                    //setListData(data);//自行实现 TODO

                    for (var i = 0; i < data.length; i++) {
                        $("#newsList").append('<li>' + jsondata.data[i].student_name + '</li>');

                    }


                },
                error: function (e) {
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                    mescroll.endErr();
                }
            });
        }


    });
</script>


</body>
</html>

 

 

<?php
/**
 * Created by 小雨在线.
 * User: 飛天
 * Date: 2017/8/25 0025
 * Time: 14:13
 */


define("HOST", "xxxx");    //主机名
define("USER", "yyyyy");        //账号
define("PASS", "aaaaa");        //密码
define("DBNAME", "dddd-database");    //数据库名


$conn = new mysqli(HOST, USER, PASS);
$conn->select_db(DBNAME);

//当前页
$page = $_GET["page"] ? $_GET["page"] : 1;


//每页显示条数
$num = $_GET["size"] ? $_GET["size"] : 10;

//偏移量
$ofset = ($page - 1) * $num;

//$t_sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE trx_status='SUCCESS'";
$t_sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE course_id=898 AND trx_status='SUCCESS'";

$t_res = $conn->query($t_sql);

//总记录数
$total = $t_res->num_rows;


//总页数
$totalpage = ceil($total / $num);


//$sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE trx_status='SUCCESS' LIMIT $ofset,$num ";
$sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE course_id=898 AND trx_status='SUCCESS' LIMIT $ofset,$num ";

$result = $conn->query($sql);


$data = [];

while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}


$a = array("pages" => $total, "data" => $data);

echo json_encode($a);
展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部