首页
所有分类
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 相关文章推荐
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
微信小程序文字显示换行问题
Jul 28 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
基于vue实现微博三方登录流程解析
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
频率(1) 实习报告(1) 手调机(1) 鉴频器(1) 发烧友(1) 数调机(1) AM(1) 灵敏度(1) 高放电路(1) 频偏(1)
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php检测文本的编码
2015/07/26 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
php连接mysql数据库
2017/03/21 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
js 判断 enter 事件
2009/02/12 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
深入理解Node module模块
2018/03/26 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python 中random模块的常用方法总结
2017/07/08 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python 内置函数汇总详解
2019/09/16 Python
python实现TCP文件传输
2020/03/20 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
Gap加拿大官网：Gap Canada
2017/08/24 全球购物
意大利自行车商店：Cingolani Bike Shop
2019/09/03 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
公司开业庆典主持词
2014/03/21 职场文书
运动会演讲稿300字
2014/08/25 职场文书
2015元旦晚会主持词（开场白+结束语）
2014/12/14 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
Win2008系统搭建DHCP服务器
2022/06/25 Servers