首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 13, 2017

前端展示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下拉刷新、上拉加载使用小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
angularjs指令之绑定策略（@、=、&amp;）
Apr 13 #Javascript
从零开始学习Node.js系列教程六：EventEmitter发送和接收事件的方法示例
Apr 13 #Javascript
详解angularJs指令的3种绑定策略
Apr 13 #Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 #Javascript
Vue组件tree实现树形菜单
Apr 13 #Javascript
从零开始学习Node.js系列教程五：服务器监听方法示例
Apr 13 #Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 #Javascript
慢日志(1) cmd(1) Switch(1) 远程桌面(2) Mint UI(1) Spring JPA(1) exists(2) REST(1) Spring Bean(1) mt-swipe(1)
You might like
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
bootstrapvalidator之API学习教程
2017/06/29 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python中类型检查的详细介绍
2017/02/13 Python
python list元素为tuple时的排序方法
2018/04/18 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
使用Python封装excel操作指南
2021/01/29 Python
萌新HTML5 入门指南（二）
2020/11/09 HTML / CSS
世界闻名的衬衫制造商：Savile Row Company
2018/07/30 全球购物
娇韵诗俄罗斯官方网站：Clarins俄罗斯
2020/10/03 全球购物
物流业务员岗位职责
2014/02/08 职场文书
2014年母亲节寄语
2014/05/07 职场文书
廉洁教育学习材料
2014/05/19 职场文书
家长通知书家长意见
2014/12/30 职场文书
毕业生党员个人总结
2015/02/14 职场文书
公司会议开幕词
2016/03/03 职场文书
怎样写工作总结啊！
2019/06/18 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android