找回密码
 立即注册

QQ登录

只需一步,快速开始

[js] ajax实现下拉刷新+上拉加载

[复制链接]
查看: 799|回复: 2
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-5-29 21:24:55 | 显示全部楼层 |阅读模式
GIF.gif
上面动图是实现的效果。
全程无需重新加载整个页面,只需要上下拉即可刷新数据!
index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>上拉加载</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

  7.     <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             list-style: none;
  13.             box-sizing: border-box;
  14.             -webkit-box-sizing: border-box;
  15.             -moz-box-sizing: border-box;
  16.         }
  17.         html {font-size: 14px; }
  18.         header {
  19.             height: 40px;
  20.             width: 100%;
  21.             min-width: 320px;
  22.             background: #000;
  23.             text-align: center;
  24.             color: #fff;
  25.             font-size: 1.2rem;
  26.             line-height: 40px;
  27.         }
  28.         footer {
  29.             height: 52px;
  30.             width: 100%;
  31.             min-width: 320px;
  32.             background: #000;
  33.             text-align: center;
  34.             color: #fff;
  35.             font-size: 1.2rem;
  36.             line-height: 52px;
  37.             position: absolute;
  38.             bottom: 0;
  39.         }
  40.         #wrapper {
  41.             width: 100%;
  42.             min-width: 320px;
  43.             position: absolute;
  44.             left: 0;
  45.             top: 40px;
  46.             bottom: 52px;
  47.             overflow: hidden;
  48.             z-index: 1;
  49.             background-color: #eee;

  50.             /* 防止本机Windows上的触摸事件 */
  51.             -ms-touch-action: none;

  52.             /* 防止callout tap-hold和文本的选择 */
  53.             -webkit-touch-callout: none;
  54.             -webkit-user-select: none;
  55.             -moz-user-select: none;
  56.             -ms-user-select: none;
  57.             user-select: none;

  58.             /* 防止文本调整取向变化对web应用程序很有用 */
  59.             -webkit-text-size-adjust: none;
  60.             -moz-text-size-adjust: none;
  61.             -ms-text-size-adjust: none;
  62.             -o-text-size-adjust: none;
  63.             text-size-adjust: none;
  64.         }
  65.         .pull-loading {
  66.             text-align: center;
  67.             height: 40px;
  68.             line-height: 40px;
  69.             display: flex;
  70.             align-items: center;
  71.             justify-content: center;
  72.         }
  73.         #scroller ul li {
  74.             padding: 20px 10px;
  75.             border-bottom: solid 1px #ccc;
  76.             background: #fff;
  77.         }
  78.     </style>

  79. </head>
  80. <body>
  81. <header>上拉加载,下拉刷新</header>
  82. <div id="wrapper">
  83.     <div id="scroller">
  84.         <ul>
  85.             <li>这里显示部分数据</li>
  86.             <li>这里显示部分数据</li>
  87.             <li>这里显示部分数据</li>
  88.             <li>这里显示部分数据</li>
  89.             <li>这里显示部分数据</li>
  90.         </ul>
  91.         <div class="pull-loading">
  92.             上拉加载
  93.         </div>
  94.     </div>
  95. </div>
  96. <footer>底部</footer>

  97. <script type="text/javascript" src="js/iscroll.js"></script>
  98. <script type="text/javascript">
  99.     var myscroll = new iScroll("wrapper", {
  100.         onScrollMove: function () { //拉动时
  101.             //上拉加载
  102.             if (this.y < this.maxScrollY) {
  103.                 $(".pull-loading").html("释放加载");
  104.                 $(".pull-loading").addClass("loading");
  105.             } else {
  106.                 $(".pull-loading").html("上拉加载");
  107.                 $(".pull-loading").removeClass("loading");
  108.             }
  109.         },
  110.         onScrollEnd: function () { //拉动结束时
  111.             //上拉加载
  112.             if ($(".pull-loading").hasClass('loading')) {
  113.                 $(".pull-loading").html("加载中...");
  114.                 pullOnLoad();
  115.             }
  116.         }
  117.     });

  118.     //上拉加载函数,ajax
  119.     var num = 0;
  120.     var page = 4; //每次加载4条
  121.     function pullOnLoad() {
  122.         setTimeout(function () {
  123.             $.ajax({
  124.                 url: "json/data.json",
  125.                 type: "get",
  126.                 dataType: 'json',
  127.                 success: function (data) {
  128.                     var data_length = data.length;//数据的总长度
  129.                     var remainder = data_length % page;//余数
  130.                     if ( data_length >= (num+page)){
  131.                         for (var j = num; j < num + page; j++){
  132.                             var text = data[j].text;
  133.                             $("#scroller ul").append("<li>"+ text +"</li>");
  134.                         }
  135.                         num+=page;
  136.                     }else if (remainder != 0 && data_length-num == remainder){
  137.                         for (var j = num; j < num + remainder; j++){
  138.                             var text = data[j].text;
  139.                             $("#scroller ul").append("<li>"+ text +"</li>");
  140.                         }
  141.                         num+=page;
  142.                     }else{
  143.                         $('.pull-loading').html("没有了哟");
  144.                     }
  145.                     myscroll.refresh();
  146.                 },
  147.                 error: function () {
  148.                     console.log("出错了");
  149.                 }
  150.             });
  151.             myscroll.refresh();
  152.         }, 500);
  153.     }
  154. </script>

  155. </body>
  156. </html>
复制代码

需要引入两个js文件
jquery-2.2.4.min.js
iscroll.js
这两个文件已经准备好了

js.zip (37.65 KB, 下载次数: 1, 售价: 5 微币)
回复

使用道具 举报

最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-5-29 21:30:08 | 显示全部楼层
还有json文件,不知道为何总是提示有不合适的内容不能修改这个帖子!,看这个吧:https://segmentfault.com/a/1190000015086218
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

33

帖子

404

积分

新人求带

积分
404
发表于 2018-6-8 16:33:51 | 显示全部楼层
没图没真相
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com