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

xxxxxxxx

* {

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;

}

下拉刷新: 添加新数据到列表顶部

$(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('

' + jsondata.data[i].student_name + '');

}

},

error: function (e) {

//联网失败的回调,隐藏下拉刷新和上拉加载的状态

mescroll.endErr();

}

});

}

});

/**

* 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);