首页
所有分类
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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
善用事件代理，警惕闭包的性能陷阱。
Jan 20 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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
贪吃蛇(2) 数据库卡死(1) 备份(2) 全局锁(1) 索尼ICF-36(1) python小游戏(5) 索引(8) 德生2P3(1) update(2) SnakeGame(1)
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
python数据结构之列表和元组的详解
2017/09/23 Python
python 异或加密字符串的实例
2018/10/14 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python文件操作基础流程解析
2020/03/19 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
伦敦眼门票在线预订：London Eye
2018/05/31 全球购物
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
清扬洗发水广告词
2014/03/14 职场文书
发布会邀请函
2015/01/31 职场文书
数学教师个人总结
2015/02/06 职场文书
新郎婚礼致辞
2015/07/27 职场文书
学校标语口号大全
2015/12/26 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android