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