淘宝手机下拉懒加载

效果图

GIF456.gif

首页

分类搜索

购物车

我的京东

---

/* 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;
}

js

$(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+=[
                    '
',
                         '',
                         '
',
                         '![](images/'+item.imageUrl+')',
                         '
',
                         '
',
                         '
'+item.productText+'
',
                         '
',
                         '
',
                         '¥',
                         ''+item.productPrice+'',
                         '
',
                         '
',
                         'ssss',
                         ''+item.productEvaluate+'',
                         '
',
                         '',
                     '
',
                ].join('');
             });
             
//           console.log(str);
             $list.append(str);
             setTimeout(function(){
                $('.loading').addClass("hide");
             },500) 
            },
            error:function(){
                alert("数据出错了")
            }
        })
    }
    
    

    
    
})
  

//02