<!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"/>
<link rel="stylesheet" href="../js/mescroll.min.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><span id="mess"></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>
-->
<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><span id="mess"></span></div>
</header>
<section class="g-scrollview" id="J_List">
<div id="J_ListContent" class="m-list list-theme1"></div>
</section>
</section>
<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 src="../js/js.cookie.js"></script>
<script src="../js/store.modern.min.js"></script>
<script src="../js/mescroll.min.js"></script>
<script>
function randNum(minnum, maxnum) {
return Math.floor(minnum + Math.random() * (maxnum - minnum));
}
!function () {
var mescroll = new MeScroll("J_List", { //第一个参数"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: 'ajax.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: 'ajax.php?page=' + page.num + "&pagesize=" + page.size,
success: function (data) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//参数data.length:当前页的数据总数
//mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
//列表如果无下一页数据,则提示无更多数据;
//如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态
var jsondata = eval('(' + data + ')');
var html = jsondata.data;
mescroll.endSuccess(html.length);
//var randNum = randNum(1,10);
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=\"" + "./images/" + randNum(1,10) + ".jpg" + "\">\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).find('img').lazyLoad({binder: '#J_List'});
}
},
error: function (e) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}
/* 通过自定义的方法获取数据【通常是需要定义变量当前第几页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=\"" + "./images/" + (i+1) + ".jpg" + "\">\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).find('img').lazyLoad({binder: '#J_List'});
}
/!* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 *!/
def.resolve(ret.data);
/!* 页码自增1 *!/
++page;
}
});
return def.promise();
},
/!**
* 当前从详情页返回列表页时调用此方法
* @param listData 该次所需加载的数据集合
* @param retPage 该次加载的页码
*!/
loadStorageListFn: function (listData, retPage) {
var def = $.Deferred();
page = retPage;
var html = '';
listData.forEach(function (val) {
html += (val.list + '将数据拼接成html，格式同loadListFn方法一致');
});
$('#J_ListContent').append(html);
def.resolve();
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", "xxx"); //主机名
define("USER", "bbbb"); //账号
define("PASS", "cccc"); //密码
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
http://www.mescroll.com/index.html
https://github.com/mescroll/mescroll
扫一扫
1794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
