用$.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="data:images/home.png" alt=""></a>

                <a href="specialList.html"><img src="data:images/juan.png" alt=""></a>

                <a href="find.html"><img src="data:images/miao.png" alt=""></a>

                <a><img src="data: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:;

    padding:;

    background-color: gainsboro;

}

header{

    background-color: white;

    height: 8%;

    position: fixed;

    top:;

    left:;

    right:;

    box-shadow:  0 0 10px  gainsboro;

    z-index:;

}

#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:;

    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:;

    line-height: 80px;

}

#mainMenuBar{

    width:100%;

    white-space:nowrap ;

    overflow-x: scroll;

    background-color: white;

    z-index:;

}

.stick {

    border-top: 8px solid   gainsboro;

    margin-top: 13.5% ;

    position:fixed;

    top:;

}

#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();

            }

        }

    });

}

用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）的更多相关文章

  1. [ 转 ]jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  2. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  3. 【CSS系列】获取实时数据做进度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ASP.NET框架获取数据字典数据做成树的格式

    private List<TreeEntity> treeList = new List<TreeEntity>();//创建一个树的List集合 public ActionR ...

  5. jq:get获取json数据并以表格形式生成到页面

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 使用$.getJSON("xx.json" ,function(data){ console.logy(data); })在本地获取 json数据

    使用 $.getJSON() 在本地获取 json数据  默认在谷歌,火狐等其他浏览器,不允许在本地获取服务器数据 所以不能在本地中使用 但是可以IE 11 中又可以使用,所以,测试时建议在IE浏览器 ...

  7. 使用JSONP，jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  8. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  9. $.getJSON获取json数据失败

    首先简单介绍下 $.ajax  $.get  $.post  $.getJSON 的区别和用法 $.ajax中有一个type属性,专门用来指定是get请求还是post请求的分别对应的就是$.get和$ ...

随机推荐

  1. 第1阶段——uboot分析之仿照bootm制作hello命令(7)

    仿照bootm命令生成来制作一个hello命令,功能:打印出hello,world!和参数值 1.点击New File ,创建cmd_hello.c将./common/cmd_bootm.c的头文件复 ...

  2. CCIE-MPLS VPN-实验手册（下卷）

    10:跨域的MPLS VPN (Option A) 10.1 实验拓扑 10.1 实验需求 a.       R1 R2 R3 组成P-NETWORK R1 R2 R3 位于AS 1,底层协议采用EI ...

  3. ps图层面板上的【透明度】与【填充】的区别

    为文字添加投影,分别调图层面板上的[透明度]与[填充]的值你就知道区别了. 如上图降低填充的数值,结果只对文字颜色有影响却对投影毫无影响. 而如上图,调整不透明度的时候对文字颜色与投影均产生效果. 这 ...

  4. Oracle数据库中直方图对执行计划的影响

    在Oracle数据库中,CBO会默认目标列的数据在其最小值low_value和最大值high_value之间均匀分布,并按照均匀分布原则,来计算目标列 施加查询条件后的可选择率以及结果集的cardin ...

  5. 团队作业4——第一次项目冲刺 FiRsT DaY

    项目冲刺--first blood 今天是阳光明媚的一天[明明是阴天好吗= =],今天是心情愉悦的一天[每天都要提交博客高兴个水水哦-3-] 天霸动霸.tua小队迎来了第一敏捷冲刺,小伙伴们是时候打起 ...

  6. SNS团队第三次站立会议（2017.04.24）

    一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 相关数据库文件建立起来  完善数据库文件 龚晓婷 研 ...

  7. SNS团队第四次站立会议（2017.04.25）

    一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 相关数据库文件建立起来  完善数据库文件 龚晓婷 研 ...

  8. 201521123034《Java程序设计》第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:从ArrayList ...

  9. 201521123002《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  10. 201521123114《Java程序设计》第9周学习总结

    1. 本章学习总结 2. 书面作业 Q1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现的异常 ...