会员登录 - 用户注册 - 设为首页 - 加入收藏 - 网站地图 Nginx   Redis   Python手册   Hadoop   Memcache
当前位置:首页 > Python基础教程 > 正文

手机移动端上滑懒加载实现

时间:2017-10-20 13:52 来源:未知 作者:admin 阅读:

参考网址:http://www.jq22.com/jquery-info6960

http://ons.me/526.html/comment-page-1

[html] view plain copy
  1. <!doctype html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">  
  5.     <title>加载底部</title>  
  6.     <!-- UC强制全屏 -->  
  7.     <meta name="full-screen" content="yes">  
  8.     <!-- QQ强制全屏 -->  
  9.     <meta name="x5-fullscreen" content="true">  
  10.     <style>  
  11.     *{  
  12.         margin: 0;  
  13.         padding:0;  
  14.         -webkit-tap-highlight-color:rgba(0,0,0,0);  
  15.         -webkit-text-size-adjust:none;  
  16.     }  
  17.     html{  
  18.         font-size:10px;  
  19.     }  
  20.     body{  
  21.         background-color: #f5f5f5;  
  22.         font-size: 1.2em;  
  23.     }  
  24.     .header{  
  25.         height: 44px;  
  26.         line-height: 44px;  
  27.         border-bottom: 1px solid #ccc;  
  28.         background-color: #eee;  
  29.     }  
  30.     .header h1{  
  31.         text-align: center;  
  32.         font-size: 2rem;  
  33.         font-weight: normal;  
  34.     }  
  35.     .content{  
  36.         background-color: #fff;  
  37.     }  
  38.     .content .item{  
  39.         display: -webkit-box;  
  40.         display: -webkit-flex;  
  41.         display: -ms-flexbox;  
  42.         display: flex;  
  43.         -ms-flex-align:center;  
  44.         -webkit-box-align:center;  
  45.         box-align:center;  
  46.         -webkit-align-items:center;  
  47.         align-items:center;  
  48.         padding:3.125%;  
  49.         border-bottom: 1px solid #ddd;  
  50.         color: #333;  
  51.         text-decoration: none;  
  52.     }  
  53.     .content .item img{  
  54.         display: block;  
  55.         width: 40px;  
  56.         height: 40px;  
  57.         border:1px solid #ddd;  
  58.     }  
  59.     .content .item h3{  
  60.         display: block;  
  61.         -webkit-box-flex: 1;  
  62.         -webkit-flex: 1;  
  63.         -ms-flex: 1;  
  64.         flex: 1;  
  65.         width: 100%;  
  66.         max-height: 40px;  
  67.         overflow: hidden;  
  68.         line-height: 20px;  
  69.         margin: 0 10px;  
  70.         font-size: 1.2rem;  
  71.     }  
  72.     .content .item .date{  
  73.         display: block;  
  74.         height: 20px;  
  75.         line-height: 20px;  
  76.         color: #999;  
  77.     }  
  78.     .opacity{  
  79.         -webkit-animation: opacity 0.3s linear;  
  80.         animation: opacity 0.3s linear;  
  81.     }  
  82.     @-webkit-keyframes opacity {  
  83.         0% {  
  84.             opacity:0;  
  85.         }  
  86.         100% {  
  87.             opacity:1;  
  88.         }  
  89.     }  
  90.     @keyframes opacity {  
  91.         0% {  
  92.             opacity:0;  
  93.         }  
  94.         100% {  
  95.             opacity:1;  
  96.         }  
  97.     }  
  98.     </style>  
  99.     <link rel="stylesheet" href="dist/dropload.css">  
  100. </head>  
  101. <body>  
  102. <div class="header">  
  103.     <h1>就当我是新闻页吧</h1>  
  104. </div>  
  105. <div class="content">  
  106.     <div class="lists"></div>  
  107. </div>  
  108. <strong><span style="font-size:14px;color:#ff0000;"><!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 --></span></strong>  
  109. <script src="js/zepto.min.js"></script>  
  110. <script src="dist/dropload.min.js"></script>  
  111. <script>  
  112. $(function(){  
  113.     var counter = 0;  
  114.     // 每页展示4个  
  115.     var num = 4;  
  116.     var pageStart = 0,pageEnd = 0;  
  117.   
  118.     // dropload  
  119.     $('.content').dropload({  
  120.         scrollArea : window,  
  121.         loadDownFn : function(me){  
  122.             $.ajax({  
  123.                 type: 'GET',  
  124.                 url: 'json/more.json',  
  125.                 dataType: 'json',  
  126.                 success: function(data){  
  127.                     var result = '';  
  128.                     counter++;  
  129.                     pageEnd = num * counter;  
  130.                     pageStart = pageEnd - num;  
  131.   
  132.                     for(var i = pageStart; i < pageEnd; i++){  
  133.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'  
  134.                                         +'<img src="'+data.lists[i].pic+'" alt="">'  
  135.                                         +'<h3>'+data.lists[i].title+'</h3>'  
  136.                                         +'<span class="date">'+data.lists[i].date+'</span>'  
  137.                                     +'</a>';  
  138.                         if((i + 1) >= data.lists.length){  
  139.                             // 锁定  
  140.                             me.lock();  
  141.                             // 无数据  
  142.                             me.noData();  
  143.                             break;  
  144.                         }  
  145.                     }  
  146.                     // 为了测试,延迟1秒加载  
  147.                     setTimeout(function(){  
  148.                         $('.lists').append(result);  
  149.                         // 每次数据加载完,必须重置  
  150.                         me.resetload();  
  151.                     },1000);  
  152.                 },  
  153.                 error: function(xhr, type){  
  154.                     alert('Ajax error!');  
  155.                     // 即使加载出错,也得重置  
  156.                     me.resetload();  
  157.                 }  
  158.             });  
  159.         }  
  160.     });  
  161. });  
  162. </script>  
  163. </body>  
  164. </html>  

dropload.min.js 控件下载:http://download.csdn.net/detail/xuanjiewu/9678817

 

(责任编辑:admin)

顶一下
(0)
0%
踩一下
(0)
0%
上一篇:DT多表联合调用,相同字段怎么区分啊
下一篇:没有了
推荐内容
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
¹رÕ/a>