溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前端展示php代碼；
<?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;
?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>加載頂部、底部</title>
<!-- 頁面布局 -->
<link rel="stylesheet" type="text/css" href="./css/display.css" rel="external nofollow" >
<!-- 框架布局 -->
<link rel="stylesheet" href="./css/dropload.css" rel="external nofollow" >
</head>
<body>
<div class="header">
<h2>就當我是新聞頁吧</h2>
</div>
<div class="content">
<div class="lists">
<!-- lists在外 避免造成多次循環輸出 -->
<?php for ($i=0; $i < count($data->data) ; $i++) { ?>
<a class="item" href="#" rel="external nofollow" >
<img src="./img/pic.jpg" alt="">
<h4>hehe</h4>
<span class="date"><?php echo $data->data[$i]->id; ?></span>
</a>
<?php } ?>
</div>
</div>
<div class="footer">
<a href="#1" rel="external nofollow" class="item">測試菜單</a>
<a href="#2" rel="external nofollow" class="item">只做展示</a>
<a href="#3" rel="external nofollow" class="item">無功能</a>
<a href="#4" rel="external nofollow" class="item">不用點</a>
</div>
<!-- jQuery1.7以上 或者 Zepto 二選一，不要同時都引用 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/dropload.min.js"></script>
<script>
$(function(){
var paging = 1;//頁碼數
// dropload函數接口設置
$('.content').dropload({
scrollArea : window,
// 下拉刷新模塊顯示內容
domUp : {
domClass : 'dropload-up',
// 下拉過程顯示內容
domRefresh : '<div class="dropload-refresh">↓下拉過程顯示內容-下拉刷新-自定義內容</div>',
// 下拉到一定程度顯示提示內容
domUpdate : '<div class="dropload-update">↑釋放更新-自定義內容</div>',
// 釋放后顯示內容
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內容...</div>'
},
domDown : {
domClass : 'dropload-down',
// 滑動到底部顯示內容
domRefresh : '<div class="dropload-refresh">↑上拉加載更多-自定義內容</div>',
// 內容加載過程中顯示內容
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內容...</div>',
// 沒有更多內容-顯示提示
domNoData : '<div class="dropload-noData">暫無數據-自定義內容</div>'
},
// 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 += '<a class="item opacity" href="'+data.data[i].link+'" rel="external nofollow" rel="external nofollow" >'
+'<img src="'+data.data[i].pic+'" alt="">'
+'<h4>hehe</h4>'
+'<span class="date">'+data.data[i].id+'</span>'
+'</a>';
}
// 為了測試，延遲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 += '<a class="item opacity" href="'+data.data[i].link+'" rel="external nofollow" rel="external nofollow" >'
+'<img src="'+data.data[i].pic+'" alt="">'
+'<h4>heheh</h4>'
+'<span class="date">'+data.data[i].id+'</span>'
+'</a>';
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 // 什么作用???
});
});
</script>
</body>
</html>
后端分頁接口
<?php
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']."<br>";
$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下拉刷新、上拉加載使用小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
