JS 插件dropload下拉刷新、上拉加载使用小结
程序员文章站
2022-11-14 16:39:26
前端展示php代码;
前端展示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" alt=""> <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+'" alt="">' +'<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+'" alt="">' +'<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下拉刷新、上拉加载使用小结,希望对大家有所帮助