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 相关文章推荐
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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/12/05 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
医科大学生的自我评价
2013/12/04 职场文书
年度考核自我鉴定
2014/02/02 职场文书
业务员自荐信范文
2014/04/20 职场文书
比赛口号大全
2014/06/10 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
大学生自我评价范文
2015/03/03 职场文书
学校捐书活动总结
2015/05/08 职场文书
学习雷锋主题班会
2015/08/14 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python