<!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>
<style>
body {
width: 100%;
height: 100%;
}
.slideout-menu {
position: fixed;
top: 0;
bottom: 0;
width: 256px;
min-height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 0;
display: none;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #FFF; /* A background-color is required */
min-height: 100vh;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
</style>
</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>
-->
<!--
<header class="m-navbar">
<a href="#" class="navbar-item">
<i class="icon-shopcart-outline"></i>
</a>
<div class="navbar-center">
<i class="icon-search"></i> <span class="navbar-title"><input type="text" id="searchKey" class="cell-input" placeholder="请输入关键字"></span>
</div>
<div class="navbar-item">
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
</div>
</header>
-->
<main class="g-flexview" id="panel">
<header class="m-navbar">
<a href="#" class="navbar-item toggle-button">
<i class="icon-type"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">什么鬼，这个标题怎么那么长啊</span>
</div>
<div class="navbar-item">
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
</div>
</header>
<section class="g-scrollview" id="J_List">
<div id="J_ListContent" class="m-list list-theme1"></div>
</section>
</main>
<nav id="menu" class="menu">
<a href="https://github.com/mango/slideout" target="_blank">
<header class="menu-header">
<span class="menu-header-title">Tests</span>
</header>
</a>
<section class="menu-section">
<h3 class="menu-section-title">Docs</h3>
<ul class="menu-section-list">
<li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
<li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
<li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
<li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
</ul>
</section>
<section class="menu-section">
<h3 class="menu-section-title">Docs</h3>
<ul class="menu-section-list">
<li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
<li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
<li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
<li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
</ul>
</section>
<section class="menu-section">
<h3 class="menu-section-title">Docs</h3>
<ul class="menu-section-list">
<li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
<li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
<li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
<li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
</ul>
</section>
<section class="menu-section">
<h3 class="menu-section-title">Docs</h3>
<ul class="menu-section-list">
<li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
<li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
<li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
<li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
</ul>
</section>
</nav>
<!--
</section>
-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>-->
<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>
<script src="../js/ydui.js"></script>
<!--<script src="../js/psQuery.min.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 src="../js/slideout.min.js"></script>
<script>
//网上比较经典的js获取url中的参数的方法
/* function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if ( r != null ){
return unescape(r[2]);
}else{
return null;
}
}*/
//但是在使用的过程中，发现其在获取中文参数的时候，获取到的值是乱码的
//解决办法:将解码方式unscape换为decodeURI
//原因:浏览器会将url中的中文参数进行encodeURI编码，所以要通过js使用decodeURI进行解码
// alert(YDUI.util.getQueryString('name'));
alert(getQueryString('name'));
function getQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return r[2]; return '';
}
//网上比较经典的js获取url中的参数的方法
/* function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if ( r != null ){
return unescape(r[2]);
}else{
return null;
}
}*/
//但是在使用的过程中，发现其在获取中文参数的时候，获取到的值是乱码的
//解决办法:将解码方式unscape换为decodeURI
//原因:浏览器会将url中的中文参数进行encodeURI编码，所以要通过js使用decodeURI进行解码
//监听搜索按钮时间
$("#searchKey").keyup(function (e) {
if (e.keyCode === 13) {
searchNow();
}
});
/*
function hotSearch(k) {
$('#searchKey').val(k);
searchNow();
}*/
$("#searchKey").blur(function(){
searchNow();
});
function searchNow() {
var kwd = $('#searchKey').val();
kwd = kwd.trim();
if (kwd.length < 2) {
YDUI.dialog.alert('关键字至少2个字符');
return false;
}
YDUI.dialog.alert('搜索 ' + kwd);
}
function randNum(minnum, maxnum) {
return Math.floor(minnum + Math.random() * (maxnum - minnum));
}
!function () {
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 80,
'tolerance': 70,
'easing': 'ease-in-out'
});
// slideout.on('open', function() { console.log(1111) });
slideout.on('translatestart', function() {
console.log('Start');
});
slideout.on('translate', function(translated) {
console.log('Translate: ' + translated); // 120 in px
});
slideout.on('translateend', function() {
console.log('End');
});
slideout.disableTouch();
// Toggle button
document.querySelector('.toggle-button').addEventListener('click', function() {
slideout.toggle();
});
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", "xxxx"); //主机名
define("USER", "cccc"); //账号
define("PASS", "dddd"); //密码
define("DBNAME", "dd-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);
参照资料：
https://github.com/Mango/slideout
http://www.ydui.org/
https://slideout.js.org/
https://github.com/mescroll/mescroll
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
