下拉刷新，上拉加載插件dropload.js使用總結(jié)

  1. 前端展示php代碼；
<?php 
header("Content-type: text/html; charset=utf-8");
include_once("./config.php");
// 初始顯示界面數(shù)據(jù)獲取
$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">
    <!-- 框架布局 -->
    <link rel="stylesheet" href="./css/dropload.css">
</head>

<body>
<div class="header">
    <h1>就當(dāng)我是新聞頁吧</h1>
</div>
<div class="content">
    <div class="lists">
    <!-- lists在外 避免造成多次循環(huán)輸出 -->
    <?php for ($i=0; $i < count($data->data) ; $i++) { ?>
        <a class="item" href="#">
            <img src="./img/pic.jpg" alt="">
            <h3>hehe</h3>
            <span class="date"><?php echo $data->data[$i]->id; ?></span>
        </a>
    <?php } ?>
    </div>
</div>
<div class="footer">
    <a href="#1" class="item">測試菜單</a>
    <a href="#2" class="item">只做展示</a>
    <a href="#3" class="item">無功能</a>
    <a href="#4" class="item">不用點(diǎn)</a>
</div>
<!-- jQuery1.7以上 或者 Zepto 二選一，不要同時都引用 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/dropload.min.js"></script>
<script>
$(function(){
    var paging = 1;//頁碼數(shù)
    // dropload函數(shù)接口設(shè)置
    $('.content').dropload({
        scrollArea : window,
        // 下拉刷新模塊顯示內(nèi)容
        domUp : {
            domClass   : 'dropload-up',
            // 下拉過程顯示內(nèi)容
            domRefresh : '<div class="dropload-refresh">↓下拉過程顯示內(nèi)容-下拉刷新-自定義內(nèi)容</div>',
            // 下拉到一定程度顯示提示內(nèi)容
            domUpdate  : '<div class="dropload-update">↑釋放更新-自定義內(nèi)容</div>',
            // 釋放后顯示內(nèi)容
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內(nèi)容...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            // 滑動到底部顯示內(nèi)容
            domRefresh : '<div class="dropload-refresh">↑上拉加載更多-自定義內(nèi)容</div>',
            // 內(nèi)容加載過程中顯示內(nèi)容
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內(nèi)容...</div>',
            // 沒有更多內(nèi)容-顯示提示
            domNoData  : '<div class="dropload-noData">暫無數(shù)據(jù)-自定義內(nèi)容</div>'
        },
        // 1 . 下拉刷新 回調(diào)函數(shù)
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                // 每次獲取最新的數(shù)據(jù)即可
                url: './interfaces/page.php?paging=1',
                dataType: 'json',
                success: function(data){
                    // $.ajax()雖然接口提供json字符串，但接收到的是 json對象
                    // alert(typeof(data));
                    var result = '';
                    // 循環(huán)拼接顯示內(nèi)容 DOM
                    // 刷新獲取多少數(shù)據(jù)，顯示多少 使用html()重置 lists DOM
                    for(var i = 0; i < data.data.length; i++){
                        result +=   '<a class="item opacity" href="'+data.data[i].link+'">'
                                        +'<img src="'+data.data[i].pic+'" alt="">'
                                        +'<h3>hehe</h3>'
                                        +'<span class="date">'+data.data[i].id+'</span>'
                                    +'</a>';
                    }
                    // 為了測試，延遲1秒加載
                    setTimeout(function(){
                        // 插入加載使用 html() 重置 DOM
                        $('.lists').html(result);
                        // 每次數(shù)據(jù)加載完，必須重置
                        me.resetload();
                    },1000);
                },
                // 加載出錯
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加載出錯，也得重置
                    me.resetload();
                }
            });
        },
        // 2 . 上拉加載更多 回調(diào)函數(shù)
        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 = '';
                    // 選擇需要顯示的數(shù)據(jù) 拼接 DOM
                    for(var i = 0; i < data.data.length; i++){
                        result +=   '<a class="item opacity" href="'+data.data[i].link+'">'
                                        +'<img src="'+data.data[i].pic+'" alt="">'
                                        +'<h3>heheh</h3>'
                                        +'<span class="date">'+data.data[i].id+'</span>'
                                    +'</a>';
                        if(data.data.length<15){
                            // 再往下已經(jīng)沒有數(shù)據(jù)
                            // 鎖定
                            me.lock();
                            // 顯示無數(shù)據(jù)
                            me.noData();
                            break;
                        }
                    }
                    // 為了測試，延遲1秒加載
                    setTimeout(function(){
                        // 加載 插入到原有 DOM 之后
                        $('.lists').append(result);
                        // 每次數(shù)據(jù)加載完，必須重置
                        me.resetload();
                    },1000);
                },
                // 加載出錯
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加載出錯，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50 // 什么作用???
    });
});
</script>
</body>
</html>
  1. 后端分頁接口
<?php 
header("Content-type: text/html; charset=utf-8");
// 包含數(shù)據(jù)庫配置信息
include_once('../config.php');
// 接收數(shù)據(jù)
$paging = isset($_REQUEST['paging'])?$_REQUEST['paging']:'';
// $paging = 1;
$num = 15;//每頁顯示記錄條數(shù)
$start_page = $num*($paging-1);// 每頁第一條記錄編號
// 用于返回數(shù)據(jù)
$return = array(); 
$data = array();
/* mysqli 面向?qū)ο?編程方式 */
// 1 . 創(chuàng)建數(shù)據(jù)庫鏈接
$conn = new mysqli($servername,$username,$password,$database);
if ($conn->connect_error) {
    die("連接失敗 : ".$conn->connect_error);
}
// echo "鏈接成功";
// 設(shè)置字符集（以防出錯 每次都要寫）
$conn->query("SET NAMES utf8");
// 2 . 數(shù)據(jù)操作
$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 . 執(zhí)行一條語句
$ret = $conn->query($sql);
// 4 . 循環(huán)獲取每條記錄
if ($ret->num_rows > 0) {
    while ($row = $ret->fetch_assoc()) { //將每條記錄以 數(shù)組形式 返回
        // var_dump($row);
        // echo "id = ".$row['id']."  mid = ".$row['mid']."  context = ".$row['context']."<br>";
        $tmp = array();//臨時數(shù)組整合信息 
        $tmp['id'] = $row['id'];
        $tmp['mid'] = $row['mid'];
        $tmp['context'] = $row['context'];
        $tmp['turn'] = $row['turn'];
        $tmp['created'] = $row['created'];
        // 臨時數(shù)組 拼接到 返回的數(shù)組中
        $data[] = $tmp; // 自增
    }
    // 拼接返回數(shù)組
    $return['result'] = 1;
    $return['data'] = $data;
}
// 5 . 關(guān)閉數(shù)據(jù)庫
$conn->close();
// 6 . 編碼為json字符串返回
echo json_encode($return);
 ?>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容