YDUI Touch InfiniteScroll无限加载数据测试

最新推荐文章于 2024-08-09 08:36:30 发布

weixin_34240657

最新推荐文章于 2024-08-09 08:36:30 发布

阅读量783

点赞数

文章标签： c# php 数据库

原文链接：https://my.oschina.net/yjft/blog/1525129

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>InfiniteScroll</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="../css/ydui.css?rev=@@hash"/>
    <link rel="stylesheet" href="../css/demo.css"/>
    <script src="../js/ydui.flexible.js"></script>
</head>
<body>






<section class="g-flexview">

    <header class="m-navbar">
        <a href="list.html" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">InfiniteScroll</span></div>
    </header>

    <section class="g-scrollview" id="J_List">
        <div id="J_ListContent" class="m-list list-theme1"></div>
    </section>


</section>





<!--

<script id="J_ListHtml" type="text/html">
    {{each list as data}}
    <a href="{{data.url}}" class="list-item">
        <div class="list-img">
            <img src="http://static.ydcss.com/uploads/ydui/goods_default.jpg" data-url="{{data.img}}">
        </div>
        <div class="list-mes">
            <h3 class="list-title">{{data.title}}</h3>
            <div class="list-mes-item">
                <div>
                    <span class="list-price"><em>¥</em>{{data.marketprice}}</span>
                    <span class="list-del-price">¥{{data.productprice}}</span>
                </div>
            </div>
        </div>
    </a>
    {{/each}}
</script>


-->






<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>
<script src="../js/ydui.js"></script>
<script>
    !function () {






        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, pageSize = 10;

        $('#J_List').infiniteScroll({
            binder: '#J_List', //很关键
            pageSize: pageSize,
            initLoad: true,
            loadingHtml: '<strong>加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */
            loadListFn: function () {
                var def = $.Deferred();

                /* 通过自定义的方法获取数据 */
                $.ajax({
                    url: './ajax.php',
                    dataType: 'json',
                    data: {page: page, pagesize: pageSize},
                    success: function (ret) {

                        console.log(ret.data);

                        /* 假设ret.list为后端返回的列表数组 */

                        /* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*/
                        /* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */


                        var html = ret.data;


                        for (var i = 0; i < html.length; i++) {
                            //拼接字符串
                            var str = '';
                            str += "<a href=\"{{data.url}}\" class=\"list-item\">\n" +
                                "<div class=\"list-img\">\n" +
                                "<img src=\"http://ai.91xiaoyu.com/plug/ydui/demo/html/logo.png\" data-url=\"" + html[i].course_name + "\">\n" +
                                "</div>\n" +
                                "<div class=\"list-mes\">\n" +
                                "<h3 class=\"list-title\">" + html[i].course_name + "</h3>\n" +
                                "<div class=\"list-mes-item\">\n" +
                                "<div>\n" +
                                "<span class=\"list-price\"><em>¥</em>" + html[i].student_name + "</span>\n" +
                                "<span class=\"list-del-price\">¥" + html[i].mobile + "</span>\n" +
                                "</div>\n" +
                                "</div>\n" +
                                "</div>\n" +
                                "</a>";
                            $('#J_ListContent').append(str);
                         $('#J_ListContent').append(str).find('img').lazyLoad({binder: '#J_List'});


                        }






                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                        def.resolve(ret.data);

                        /* 页码自增1 */
                        ++page;
                    }
                });

                return def.promise();
            }
        });











        /*






                // 根据实际情况自定义获取数据方法
                var page = 1, pageSize = 10;
                var loadMore = function (callback) {
                    $.ajax({
                        url: 'http://list.ydui.org/getdata.php?type=backposition',
                        dataType: 'jsonp',
                        data: {
                            page: page,
                            pagesize: pageSize
                        },
                        success: function (ret) {
                            typeof callback == 'function' && callback(ret);
                        }
                    });
                };











                $('#J_List').infiniteScroll({
                    binder: '#J_List',
                    pageSize: pageSize,
                    initLoad: true,
                    loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>',
                    loadListFn: function () {
                        var def = $.Deferred(); //todo 1

                        loadMore(function (listArr) {

                            var html = template('J_ListHtml', {list: listArr});
                            $('#J_ListContent').append(html).find('img').lazyLoad({binder: '#J_List'});

                            def.resolve(listArr); //todo 2

                            ++page;
                        });

                        return def.promise();  //todo 3
                    }
                });






        */








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

<?php




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


  $conn = new mysqli(HOST, USER, PASS);

  $conn->select_db(DBNAME);

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


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

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

  $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 / $pagesize);


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

  //结果集
  $result = $conn->query($sql);


  $data = [];

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


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

  echo json_encode($a);

参考资料：

http://www.ydui.org/

https://github.com/ydcss/ydui

转载于:https://my.oschina.net/yjft/blog/1525129