用$.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();
}
}
});
}