html 下拉刷新插件,JS 插件dropload下拉刷新、上拉加载使用小结

前端展示php代码；

header("Content-type: text/html; charset=utf-8");

include_once("./config.php");

// 初始显示界面数据获取

$data = file_get_contents(URL."/interfaces/page.php?paging=1");

// echo $data;die;

$data = json_decode($data);

// var_dump($data);die;

?>

加载顶部、底部

就当我是新闻页吧

<?php for ($i=0; $i < count($data->data) ; $i++) { ?>

hehe

<?php echo $data->data[$i]->id; ?>

测试菜单

只做展示

无功能

不用点

$(function(){

var paging = 1;//页码数

// dropload函数接口设置

$('.content').dropload({

scrollArea : window,

// 下拉刷新模块显示内容

domUp : {

domClass : 'dropload-up',

// 下拉过程显示内容

domRefresh : '

↓下拉过程显示内容-下拉刷新-自定义内容

',

// 下拉到一定程度显示提示内容

domUpdate : '

↑释放更新-自定义内容

',

// 释放后显示内容

domLoad : '

加载中-自定义内容...

'

},

domDown : {

domClass : 'dropload-down',

// 滑动到底部显示内容

domRefresh : '

↑上拉加载更多-自定义内容

',

// 内容加载过程中显示内容

domLoad : '

加载中-自定义内容...

',

// 没有更多内容-显示提示

domNoData : '

暂无数据-自定义内容

'

},

// 1 . 下拉刷新 回调函数

loadUpFn : function(me){

$.ajax({

type: 'GET',

// 每次获取最新的数据即可

url: './interfaces/page.php?paging=1',

dataType: 'json',

success: function(data){

// $.ajax()虽然接口提供json字符串，但接收到的是 json对象

// alert(typeof(data));

var result = '';

// 循环拼接显示内容 DOM

// 刷新获取多少数据，显示多少 使用html()重置 lists DOM

for(var i = 0; i < data.data.length; i++){

result += ''

+''

+'

hehe

'

+''+data.data[i].id+''

+'';

}

// 为了测试，延迟1秒加载

setTimeout(function(){

// 插入加载使用 html() 重置 DOM

$('.lists').html(result);

// 每次数据加载完，必须重置

me.resetload();

},1000);

},

// 加载出错

error: function(xhr, type){

alert('Ajax error!');

// 即使加载出错，也得重置

me.resetload();

}

});

},

// 2 . 上拉加载更多 回调函数

loadDownFn : function(me){

paging++; // 每次请求，页码加1

$.ajax({

type: 'GET',

url: './interfaces/page.php?paging='+paging,

dataType: 'json',

success: function(data){

// data = JSON.parse(data);

var result = '';

// 选择需要显示的数据 拼接 DOM

for(var i = 0; i < data.data.length; i++){

result += ''

+''

+'

heheh

'

+''+data.data[i].id+''

+'';

if(data.data.length<15){

// 再往下已经没有数据

// 锁定

me.lock();

// 显示无数据

me.noData();

break;

}

}

// 为了测试，延迟1秒加载

setTimeout(function(){

// 加载 插入到原有 DOM 之后

$('.lists').append(result);

// 每次数据加载完，必须重置

me.resetload();

},1000);

},

// 加载出错

error: function(xhr, type){

alert('Ajax error!');

// 即使加载出错，也得重置

me.resetload();

}

});

},

threshold : 50 // 什么作用???

});

});

后端分页接口

header("Content-type: text/html; charset=utf-8");

// 包含数据库配置信息

include_once('../config.php');

// 接收数据

$paging = isset($_REQUEST['paging'])?$_REQUEST['paging']:'';

// $paging = 1;

$num = 15;//每页显示记录条数

$start_page = $num*($paging-1);// 每页第一条记录编号

// 用于返回数据

$return = array();

$data = array();

/* mysqli 面向对象 编程方式 */

// 1 . 创建数据库链接

$conn = new mysqli($servername,$username,$password,$database);

if ($conn->connect_error) {

die("连接失败 : ".$conn->connect_error);

}

// echo "链接成功";

// 设置字符集(以防出错 每次都要写)

$conn->query("SET NAMES utf8");

// 2 . 数据操作

$sql = "SELECT * FROM mission_news order by id desc limit $start_page , $num;";

// $sql = "SELECT * FROM mission_news order by id desc limit 0 , 15;";

// 3 . 执行一条语句

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

// 4 . 循环获取每条记录

if ($ret->num_rows > 0) {

while ($row = $ret->fetch_assoc()) { //将每条记录以 数组形式 返回

// var_dump($row);

// echo "id = ".$row['id']." mid = ".$row['mid']." context = ".$row['context']."
";

$tmp = array();//临时数组整合信息

$tmp['id'] = $row['id'];

$tmp['mid'] = $row['mid'];

$tmp['context'] = $row['context'];

$tmp['turn'] = $row['turn'];

$tmp['created'] = $row['created'];

// 临时数组 拼接到 返回的数组中

$data[] = $tmp; // 自增

}

// 拼接返回数组

$return['result'] = 1;

$return['data'] = $data;

}

// 5 . 关闭数据库

$conn->close();

// 6 . 编码为json字符串返回

echo json_encode($return);

?>

以上所述是小编给大家介绍的JS 插件dropload下拉刷新、上拉加载使用小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！