淘宝手机下拉懒加载

效果图

GIF456.gif

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>jdvvv女装</title>

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<header>

<div class="container-fluid p0">

<form>

<div class="row">

<div class="back col-xs-2 text-center"><i class="fa fa-chevron-left"></i></div>

<div class="form-group col-xs-8 search">

<input type="text" class="form-control" id="exampleInputEmail1" placeholder="女装">

</div>

<div class="menu col-xs-2"><i class="fa fa-align-left"></i></div>

</div>

</form>

</div>

<ul class="nav hide">

<li class="col-xs-3 text-center"><a href="#"><i class="fa fa-home"></i><span>首页</span></a></li>

<li class="col-xs-3 text-center"><a href="#"><i class="fa fa-search"></i><span>分类搜索</span></a></li>

<li class="col-xs-3 text-center"><a href="#"><i class="fa fa-shopping-cart"></i><span>购物车</span></a></li>

<li class="col-xs-3 text-center"><a href="#"><i class="fa fa-user"></i><span>我的京东</span></a></li>

</ul>

</header>

<div class="container p0">

<ul class="product-list">

<!--<li class="col-xs-6">

 <a href="http://www.dongnaoedo.com">

 <div class="img-content">

 ![](images/01.jpg)

 </div>

 <div class="text-content p15">

 <p>我就京东的异步加载</p>

 </div>

 <div class="price-content p15">

 <span>¥</span>

 <strong>58.99</strong>

 </div>

 <div id="" class="comment-content p15">

 <small>ssss</small>

 <span>条评论</span>

 </div>

 </a>

 </li>-->

<!-- 

 <li class="col-xs-6">

 <a href="http://www.dongnaoedo.com">

 <div class="img-content">

 ![](images/01.jpg)

 </div>

 <div class="text-content p15">

 <p>我就京东的异步加载</p>

 </div>

 <div class="price-content p15">

 <span>¥</span>

 <strong>58.99</strong>

 </div>

 <div id="" class="comment-content p15">

 <small>ssss</small>

 <span>条评论</span>

 </div>

 </a>

 </li>

 -->

</ul>

</div>

<div class="loading hide"><i class="fa fa-spinner fa-spin"></i></div>

<div class="back-top hide"><i class="fa fa-chevron-up"></i></div>

<script src="js/zepto.js"></script>

<!--<script src="js/jquery.min.js"></script>-->

<script src="js/index.js"></script>

</body>

</html>

/* reset */

html,
body {
    width: 100vw;
    min-width: 320px;
    max-width: 640px;
}

body {
    font-family: "Microsoft Yahei";
    background: #f0f0f0;
}

body,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #666;
}


/* common */

.p0 {
    padding: 0;
}

.pl5 {
    padding-left: 5px;
}

.mt10 {
    margin-top: 10px;
}


/* header */

header {
    position: fixed;
    z-index: 999;
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 57px;
    background: #f0f0f0;
}

header .search {
    margin-top: 6px;
}

header .back i,
header .menu i {
    font-size: 20px;
    line-height: 57px;
    color: #d4d4d4;
}

header .nav {
    background: #444;
}

.nav > li > a:hover,
.nav > li > a:focus {
    background-color: #666;
}

header .nav li {
    padding: 0;
}

header .nav li a {
    font-size: 12px;
    color: #fff;
}

header .nav i {
    font-size: 24px;
}

header .nav span {
    display: block;
}


/* container */

.container {
    padding-top: 57px;
}

.container .product-list {
    overflow: hidden;
}

.container .product-list li {
    padding-right: 2px;
    padding-left: 0;
}

.container .product-list li:nth-child(2n) {
    padding-right: 0;
    padding-left: 2px;
}

.container .product-list li a {
    display: block;
    background: #fff;
}

.container .product-list .img-content img {
    width: 100%;
}

.container .product-list .text-content p {
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #444;
}

.container .product-list .price-content {
    padding: 5px 0;
    color: #f00;
    font-szie: 18px;
}

.container .product-list .comment-content {
    padding-bottom: 10px;
    color: #999;
    font-szie: 12px;
}


/* loading */

.loading {
    position: fixed;
    bottom: 0;
    z-index: 99;
    padding: 20px 0;
    width: 100%;
    font-size: 30px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .3);
}


/* back-top */

.back-top {
    position: fixed;
    right: 10px;
    bottom: 40px;
    z-index: 999;
    border: 1px solid #999;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #999;
    background: #ccc;
    opacity: .6;
}

$(function(){
    var num=0;
    var $list=$('.product-list');
//  console.log($list.html())
    
//  导航栏的隐藏显示效果
    $('header .menu').click(function(){
        $('header .nav').toggleClass('hide')
    })


$('.back-top').click(function(){
//  alert("22")
//  $('window').animate({"scrollTop()":0},500);
//   $('body,html').animate({scrollTop:0},800);  jq生效
//$('').animate({"scrollTop":0},500);
     $(window).scrollTop(0);
})
    
//左边的2个小按钮
    $(window).on('scroll',function(){ 
        if($(window).scrollTop()>300){
//          $(this).animate({"scrollTop":"0"},500);
            $('header').addClass("hide");
            $('.back-top').removeClass('hide');
        }else{
            $('header').removeClass("hide");
            $('.back-top').addClass('hide');
        }
        //滚动条的高度=文档的高度-可是区域的高度 
 
        
        if($(window).scrollTop()>=$(document).height()-$(window).height()){
//          var sf=$('.product-list').find("li").length;
//          console.log(sf+"Aaa")
            if(++num<9){
                loaddata($list,num);
            }else{
//              console.log("到底部了"+sf.length)
                console.log("到底部了"+$('.product-list').find("li").length);
                
            }
        }
        
    })
//等待图片
 
    

//  异步加载数据
    loaddata($list,num);
    function loaddata($list,num){
        $('.loading').removeClass("hide");
        $.ajax({
            url:"json_data/data-"+num+".json",
            success:function(data){
             //console.log(data)
             var str=''; 
             $.each(data, function(i,item){
                str+=[
                    '<li class="col-xs-6">',
                         '<a href="'+item.URL+'">',
                         '<div class="img-content">',
                         '![](images/'+item.imageUrl+')',
                         '</div>',
                         '<div class="text-content p15">',
                         '<p>'+item.productText+'</p>',
                         '</div>',
                         '<div class="price-content p15">',
                         '<span>¥</span>',
                         '<strong>'+item.productPrice+'</strong>',
                         '</div>',
                         '<div id="" class="comment-content p15">',
                         '<small>ssss</small>',
                         '<span>'+item.productEvaluate+'</span>',
                         '</div>',
                         '</a>',
                     '</li>',
                ].join('');
             });
             
//           console.log(str);
             $list.append(str);
             setTimeout(function(){
                $('.loading').addClass("hide");
             },500) 
            },
            error:function(){
                alert("数据出错了")
            }
        })
    }
    
    

    
    
})

//02

  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页列表</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <!-- 引入YDUI样式 -->
    <link rel="stylesheet" href="../css/ydui.css" />
    <!--mms-->
    <!-- 引入YDUI自适应解决方案类库 -->
    <script src="../js/ydui.flexible.js"></script>
</head>
<body>


<style>
    /*列表页*/
.m19-view-dvul{width: 100%; height: auto; overflow: hidden;}
.m19-view-ul{width: 7.3rem; margin: 0 auto;}
.m19-view-ul li{width: 3.6rem; height: 4.65rem; margin-right: 0.1rem; margin-bottom: 0.1rem; float: left; background: #FFFFFF; overflow: hidden; }
.m19-view-ul li:nth-child(2n){margin-right: 0;}
.m19-view-ul li a{display: block; width: 3.3rem; margin: 0 auto;  height: 4.65rem;}
.m19-view-ul li a img{width: 3.3rem; height: 3.3rem; display: block; margin-top: 0.15rem;}
.m19-view-ul-dv{margin-top: 0.22rem; width: 3.6rem ; text-align: center; }
.m19-view-ul-dv h4{width: 3.6rem ; margin-bottom: 0.08rem; text-align: center; font-size: 0.24rem; color: #4a4a4a; height: 0.34rem; line-height: 0.34rem;}
.m19-view-ul-dv p{color: #FF2658; font-size: 0.22rem;} 
.m19-view-lie:after {  height: 0.4rem; } 

</style>

 <div class="g-view  m19-view-lie">
       <div class="m19-view-dvul">
        <img src="../xiaot.gif" class="tyuhei loading" style=" position: fixed; top: 0; left: 0; width: 100%; height: 1rem;"/>
          <ul class="m19-view-ul"></ul>
       </div>
       
     <style>
        .tyuhei{display: none; }
     </style>
       
 </div> 
<style> body{background-color: #F1F1F1;} </style> 
<!-- 引入jQuery 2.0+ -->
<script src="../js/jquery-2.2.4.min.js"></script>
<!-- 引入YDUI脚本===-->
<script src="../js/ydui.js"></script>
<!--mms-->
<script type="text/javascript" src="../js/mms.js" ></script>

     
     <script type="text/javascript" >
        $(function () {

/*************01******************/
    var num=1;
    var $list=$('.m19-view-ul');
    $(window).on('scroll',function(){ 
      if( $(window).scrollTop()>= $(document).height() - $(window).height() ) {  
              if(++num ){
                loaddata($list,num);
                 }else{
                   console.log("到底部了") 
                 }     
               }
          })
      var sty= " http "//你的请求地址
         loaddata($list,num);
        function loaddata($list,num){
            $('.loading').removeClass("tyuhei");
         $.ajax({
            async : true,
            url : "sty"+num,
            type : "GET",
            dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
            jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
            jsonpCallback: 'handleResponse', //设置回调函数名
//            data : {
//                status : 1 
//            }, 
              success: function(response, status, xhr){
                      var str='';
                     $.each(response.result, function(i,item) {
                        str+=[
                          '<li>',
                          '<a href="#">',
                                '<img src="../img/inzlw.jpg" alt="" class="lazy" tyu="'+item.goods_id+'"  data-url="../img/m18_banner1.png"  />',
                                '<div class="m19-view-ul-dv">',
                                     '<h4  class="ds-dan">'+item.goods_name+'</h4>',
                                     '<p>',
                                            '<span>&yen;</span>',
                                            '<span>'+item.shop_price+'</span>',
                                            '<span>-</span>',
                                            '<span>'+item.cat_id+'</span>',
                                     '</p>',
                                '</div>',
                            '</a>',
                        '</li>',
                        ].join('')
                     });
                     $list.append(str)
                     setTimeout(function(){
                            $('.loading').addClass("tyuhei");
                         },500) 
              },
               error:function(){
                alert("数据出错了")
            }
          });
        
         
    }
/*************02******************/



          }); 

    </script>




</body> 
</html>

最后编辑于：2018.03.07 15:15:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,711评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,932评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,770评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,799评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,697评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,069评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,535评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,200评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,353评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,290评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,331评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,020评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,610评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,694评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,927评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,330评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,904评论 2赞 341

淘宝手机下拉懒加载

推荐阅读更多精彩内容