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

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
You might like
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
Vue表单及表单绑定方法
2018/09/04 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
python通过加号运算符操作列表的方法
2015/07/28 Python
Python Requests安装与简单运用
2016/04/07 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python如何代码集体右移
2020/07/20 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
材料采购员岗位职责
2013/12/17 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
学生自我评语
2015/01/04 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python