用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）

　　　　　　　　　　用$.getJSON() 和$.post()获取第三方数据做页面

首页 index.html 页面

　　需要jquery 　和 template-web js文件可以直接在官网下载

中间导航条的固定

可以在导航添加一个动态class值 class值的css样式 position ：fixed ；

$(document).ready(function() {

　　var $window = $(window),

　　$mainMenuBar = $('#mainMenuBar'),

　　$mainMenuBarAnchor = $('#mainMenuBarAnchor');

　　$window.scroll(function() {

　　　　var window_top = $window.scrollTop();

　　　　var div_top = $mainMenuBarAnchor.offset().top;

　　　　if (window_top > div_top) {

　　　　　　$mainMenuBar.addClass('stick');

　　　　　　$mainMenuBarAnchor.height($mainMenuBar.height());

　　　　} else {

　　　　　　$mainMenuBar.removeClass('stick');

　　　　　　$mainMenuBarAnchor.height(0);

　　　　}

　　});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>惠品折首页</title>
</head>
<body>
    
        <header>
            <div id="top">
                        <img src="http://m.huipinzhe.com/static/img/logo.jpg" alt="logo">
                        <input type="text">
                        <a href="category.html" target="_self"><img src="./images/menu.png" alt="search"></a>
                        
            </div> 
        </header>
        <img id="banner" src="http://huipinzhe-img-03.b0.upaiyun.com/banner1009/梁荷750.png" alt="">
        <img id="banner1"  src="./images/banner.png" alt="">
        <div id="mainMenuBarAnchor"></div>
        <div id="mainMenuBar">
            <ul id="ul">

            </ul>
        </div>
        <div id="bottom">
                <a href="index.html"><img src="images/home.png" alt=""></a>
                <a href="specialList.html"><img src="images/juan.png" alt=""></a>
                <a href="find.html"><img src="images/miao.png" alt=""></a>
                <a><img src="images/my.png" alt="">  </a>
            </div>   
        <section id="container"><section>


       

        
        <script id="goods" type="text/html">
            {{each rows good }}
                {{if good.itemType=="TIANMAO"}}
                    <div class="good">
                        <img src="  {{good.image}}">
                        <div>
                            <p><span>天猫</span>{{good.title}}</p>
                            <p class="zi">活动价￥{{good.phoneActivityPrice}} </p>
                            <p class="tu"><div>{{good.originPrice}}</div><div>立即抢购</div></p>
                        </div>   
                   </div>
                {{else if  good.itemType=="TAOBAO"}}
                    <div class="good">
                        <img src="  {{good.image}}">
                        <div>
                            <p><span>淘宝</span>{{good.title}}</p>
                            <p class="zi">活动价￥{{good.phoneActivityPrice}} </p>
                            <p class="tu"><div>{{good.originPrice}}</div><div>立即抢购</div></p>
                        </div>  
                    </div>
            
                {{/if}}
            
        {{/each}}
                       
        </script>
    <script src="jquery.js"></script>
    <script src="template-web.js"></script>
    <script src="index.js"></script>
</body>
</html>

首页css 样式 index.css

*{
    box-sizing: border-box;
}
html{
    height: 100%;
    
}
body{
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: gainsboro;
}
header{
    background-color: white;
    height: 8%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow:  0 0 10px  gainsboro;
    z-index: 100;
    
}
#top{
    display: flex;
    align-items: center;
    height: 100%;
    /* background-color: red; */
    position: relative;
}
#top >img:nth-child(1){
     width: 140px;  
    margin-left: 20px;

}
#bottom{
    position: fixed;
    bottom: 0px;
    z-index:100;
    width: 100%;
    height: 8%;
    background-color: white;
    display: flex;
    justify-content: space-around;
}
#bottom>a{
    display: inline-block;
    height: 100%;
}
#bottom>a>img{
    display: inline-block;
    height: 100%;
}
#top>input{
    margin-left: 30px;
    border-color:  gainsboro;
    background-color: gainsboro;
    height: 60%;
    width:70%;
    border:none;
    border-radius: 35px;
}

#top>img:nth-child(3){
    width:80px;
    height: 80%;
    position: absolute;
    right: 10px;
}
#banner{
    /* display: block; */
    margin-top: 13% ;
    width: 100%;
    margin-bottom: 15px;
}
#banner1{
    /* margin-top: 13%; */
    width: 100%;
}
#ul>li:first-child{
    color:red;
    border-bottom: 2px solid red;
}
#ul >li{
   
    list-style: none;
    display:inline-block;
    color:black;
    margin-left:50px;
    font-size:30px;
    font-weight:100;
    line-height: 80px;
}
#mainMenuBar{
    
    width:100%;
    white-space:nowrap ;
    overflow-x: scroll;
    background-color: white;
    z-index:100;
}
.stick {
    border-top: 8px solid   gainsboro;
    margin-top: 13.5% ;
    position:fixed;
    top:0;
}
#container{
    height: 100%;
    width:100%;
    overflow: scroll;
}
.good{
    width:100%;
    font-size: 30px;
    background-color: white;
    padding-top:15px;
    margin-bottom: 30px;
}
.good >img{
    width: 40%;
    display: inline-block;
}
.good>div{
   
    display: inline-block;
    width: 55%;
}

首页js文件 index.js

$.getJSON('http://m.huipinzhe.com/h5/home/gethomepage',function(data){
    console.log(data);
    $('#banner').attr('src',data.data.HomeModelList[0].rows[0].image);
    var labels=data.data.labels;
    console.log(labels);
    for(var i=0;i<labels.length;i++){
        $('#ul').append('<li class="'+labels[i].id+'">'+labels[i].label+'</li>');
    }

    $(document).ready(function() {
        var $window = $(window),
         $mainMenuBar = $('#mainMenuBar'),
            $mainMenuBarAnchor = $('#mainMenuBarAnchor');
        $window.scroll(function() {
            var window_top = $window.scrollTop();
            var div_top = $mainMenuBarAnchor.offset().top;
            if (window_top > div_top) {
                $mainMenuBar.addClass('stick');
                $mainMenuBarAnchor.height($mainMenuBar.height());
            } else {
                $mainMenuBar.removeClass('stick');
                $mainMenuBarAnchor.height(0);
            }
        });
    });
    //初始值
    //商品列表初始
    
    clickTurn(-1);
    //导航鼠标的点击事件
    $('#ul>li').click(function(){
        $(this).css({
            color:'red',
            'border-bottom': '2px solid red',
        }).siblings().css({
            color:'black',
            'border-bottom':'none',
        });
        var labelId=$(this).attr('class');
        //清空container中的内容 添加新的内容
        // $('#container').empty();
        clickTurn(labelId);
    });


});

/* 推荐商品列表 */
function clickTurn(labelId){
    var page=0;
    var isFinsh;
    function getDataByPageNumber(){
        isFinsh=false;
        page++;
        if(page>12){
            alert('已经加载完毕');
            return;
        }
        $.post('http://m.huipinzhe.com/h5/home/gethomepage',{labelId : labelId ,pageNum : page},function(data){
            
            console.log(data.data.onlineData);
          var data=data.data.onlineData;
              var html=template('goods',data);
              $('#container').html(html);
            isFinsh=true;
          });
    }
    getDataByPageNumber();
    $('#container').scroll(function(event){
        console.log("滚动");
        if(event.target.scrollTop+event.target.clientHeight>event.target.scrollHeight-10){
            console.log('获取下一页数据');
            if(isFinsh){
                getDataByPageNumber();
            }   
        }  
    });   
}

posted @ 2017-10-13 15:01 逆水行舟！阅读(370) 评论(0) 收藏举报

刷新页面返回顶部

变局

用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）

用$.getJSON() 和$.post()获取第三方数据做页面

公告