前端展示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"> <h1>就當我是新聞頁吧</h1></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" <h3>hehe</h3> <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+'" +'<h3>hehe</h3>' +'<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+'" +'<h3>heheh</h3>' +'<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下拉刷新、上拉加載使用小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
