fe / YOHOBUYWAP · Commits

Go to a project

Authored by zhangxiaoru
Commit 1d0989c683bb5b444c36fcab608feb861ae1a803 1 parent 62b58e1f

首页

Inline Side-by-side
Showing 4 changed files with 169 additions and 49 deletions
... ... @@ -24,7 +24,8 @@ var tip = require('../plugin/tip'),
filter = require('../plugin/filter'),
loading = require('../plugin/loading');
var $goodsContainer = $('#goods-container'),
var $subNav = $('.home-sub-nav'),
$goodsContainer = $('#goods-container'),
$goodsChildren = $goodsContainer.children(),
$ngc = $($goodsChildren.get(0)),
$pgc = $($goodsChildren.get(1)),
... ... @@ -37,9 +38,22 @@ var winH = $(window).height(),
var defaultOpt = require('./query-param');
var $listNav = $('#list-nav'),
$posList = $('#pos-list'),
//导航数据信息
navInfo = {
new: {
order: 1,
reload: true,
page: 0,
end: false
},
hot: {
order: 1,
reload: true,
page: 0,
end: false
},
newest: {
order: 1,
reload: true,
... ... @@ -60,6 +74,7 @@ var $listNav = $('#list-nav'),
}
},
$pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
$lie = $posList.find('.active'),
searching;
var viewType = 1; // 1-首页,2-上新,3-人气
... ... @@ -105,15 +120,24 @@ function tabChange(dom, index) {
$.jqtab = function(nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
var index = $(this).index(),
activeTab = $(this).attr('tab');
$nav1.removeClass('fixed-top');
tabChange($(nav + ' li'), index);
tabChange($(posNav + ' li'), index);
$(main).hide();
$('#' + activeTab).fadeIn();
if(activeTab == 'new-arrival'){
newData();
}else if(activeTab == 'popularity'){
hotData();
}
return false;
});
};
... ... @@ -140,8 +164,11 @@ function getPageGoods(info) {
data: info.data,
success: function(data) {
info.callBack(data);
myScroll && myScroll.refresh();
setTimeout(function () {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
searching = false;
},
error: function() {
... ... @@ -151,22 +178,39 @@ function getPageGoods(info) {
});
}
function homeData() {
function newData() {
var req = {};
req.url = '/product/newsale/selectNewSale';
req.url = '/index/search/search';
req.data = {
type: 'newest',
order: '1',
page: '1',
shop_id: '102'
};
req.callBack = function(data) {
$ngc.html(data);
$('#new-arrival').append(data);
navInfo.new.page++;
}
getPageGoods(req);
}
function newData() {
console.log('newData');
}
function hotData() {
console.log('hotData');
var req = {};
req.url = '/index/search/search';
req.data = {
type: 'sales',
order: '1',
page: '1',
shop_id: '102'
};
req.callBack = function(data) {
$('#popularity').append(data);
navInfo.hot.page++;
}
getPageGoods(req);
}
myScroll.on('scroll', function() {
... ... @@ -174,9 +218,7 @@ myScroll.on('scroll', function() {
if (sTop + winH * 2 > scH) {
switch(viewType) {
case 1:
homeData();
break;
case 2:
newData();
break;
... ... @@ -185,6 +227,7 @@ myScroll.on('scroll', function() {
break;
}
}
if (sTop < imgH) {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
... ... @@ -234,16 +277,7 @@ myScroll.on('scroll', function() {
});
}
}
// else {
// if (!$nav2.hasClass('absolute')) {
// $nav1.addClass('absolute')
// .removeClass('fixed-top');
// }
// $nav2.css({
// transform: 'translate(0, ' + (imgH + nav1H + main1oH + main2oH -sTop - scH) + 'px)'
// });
// }
}
}//
$("#scroller").trigger('scroll');
});
... ... @@ -270,7 +304,6 @@ $(window).load(function() {
main2oH = $('#goods-container').outerHeight();
setTimeout(function(){
scH = $('#scroller').outerHeight();
console.log(scH)
},2000);
});
... ... @@ -282,7 +315,6 @@ function search(opt) {
nav, navType,
page;
return;
if (searching) {
return;
}
... ... @@ -296,11 +328,12 @@ return;
}
}
//处理active状态
$listNav.children('.active').removeClass('active');
$pre.addClass('active');
switch (opt.type) {
case 'shop_id':
ext = {
shop_id: opt.id
};
break;
case 'gender':
ext = {
gender: opt.id
... ... @@ -373,7 +406,7 @@ return;
$.ajax({
type: 'GET',
url: '/product/newsale/selectNewSale',
url: opt.url ? opt.url : '',
data: setting,
success: function(data) {
var $container,
... ... @@ -418,8 +451,10 @@ return;
window.rePosFooter();
setTimeout(function () {
myScroll.refresh();
scH = $('#scroller').outerHeight();
console.log(scH)
}, 1000);
},
error: function() {
tip.show('网络断开连接了~');
... ... @@ -427,7 +462,6 @@ return;
loading.hideLoadingMask();
}
});
}
$.ajax({
... ... @@ -437,6 +471,13 @@ $.ajax({
success: function(data) {
$goodsContainer.append(data);
setTimeout(function () {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
//初始化filter&注册filter回调
filter.initFilter({
fCbFn: search,
... ... @@ -455,8 +496,13 @@ $listNav.bind('contextmenu', function(e) {
return false;
});
$listNav.on('touchend touchcancel', function(e) {
$posList.bind('contextmenu', function(e) {
return false;
});
$subNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
cname,
nav,
navType,
$active;
... ... @@ -485,12 +531,14 @@ $listNav.on('touchend touchcancel', function(e) {
filter.showFilter();
}
} else {
if ($this.hasClass('new')) {
cname = '.new';
navType = 'newest';
} else if ($this.hasClass('price')) {
cname = '.price';
navType = 'price';
} else if ($this.hasClass('discount')) {
cname = '.discount';
navType = 'discount';
}
... ... @@ -504,6 +552,7 @@ $listNav.on('touchend touchcancel', function(e) {
}
if ($this.hasClass('price') || $this.hasClass('discount')) {
$this = $subNav.find(cname);
// 价格/折扣切换排序状态
$this.find('.icon > .iconfont').toggleClass('cur');
... ... @@ -512,7 +561,7 @@ $listNav.on('touchend touchcancel', function(e) {
nav.order = nav.order === 0 ? 1 : 0; //切换排序
}
} else {
$active = $this.siblings('.active');
$active = $subNav.find('.active');
$pre = $this; //$pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
... ... @@ -540,25 +589,36 @@ $listNav.on('touchend touchcancel', function(e) {
}
}
$active.removeClass('active');
$this.addClass('active');
$subNav.children().removeClass('active');
$subNav.find(cname).addClass('active');
}
if (nav.reload) {
search();
search({
type: 'shop_id',
id: '111',
url: '/index/search/search'
});
}
}
e.stopPropagation();
});
function scrollHandler() {
//当scroll到1/4$goodsContainer高度后继续请求下一页数据
myScroll && myScroll.refresh();
if (sTop + winH > $('#scroller').height() - 0.25 * $goodsContainer.height() - 50){
if (sTop + winH > $('#scroller').height() - 0.25 *
$goodsContainer.height() - 50){
if ($pre !== undefined) {
search();
search({
type: 'shop_id',
id: '1111',
url: '/index/search/search'
});
}
}
}
... ... @@ -569,7 +629,12 @@ $(window).scroll(function() {
});
//初始请求最新第一页数据
search();
search({
type: 'shop_id',
id: '1111',
url: '/index/search/search'
}
);
$listNav.on('touchstart', 'li', function(e) {
$(this).addClass('bytouch');
... ... @@ -577,6 +642,13 @@ $listNav.on('touchstart', 'li', function(e) {
$listNav.find('li').removeClass('bytouch');
});
$posList.on('touchstart', 'li', function(e) {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
$posList.find('li').removeClass('bytouch');
});
//底部导航点击
function fotterClick(group) {
... ... @@ -604,4 +676,3 @@ $(document).bind('touchstart',function(){
$('.shop-foot-wrapper').bind('touchstart',function(e){
stopPropagation(e);
});
... ...
... ... @@ -411,4 +411,53 @@
background:#eee;
}
.new-arrival {
padding-top: 30px;
overflow: hidden;
padding-left: 15px;
}
.popularity {
padding-top: 30px;
overflow: hidden;
padding-left: 15px;
}
.pos-list {
@extend .discount-page;
li {
display: block;
height: 28px;
float: left;
line-height: 28px;
width: 24%;
text-align: center;
border-left: 1px solid #e1e1e1;
margin-top: 30px;
margin-bottom: 30px;
border-sizing: border-box;
span {
font-size: 28px;
}
&:first-child {
border-left: none;
}
}
.active .cur {
color: #000;
}
.active a {
color: #000;
}
.iconfont {
font-weight: bold;
}
}
}
\ No newline at end of file
... ...
... ... @@ -104,20 +104,20 @@
{{> product/goods-nav-top}}
</div>
</div>
<div id="new-arrival" class=""></div>
<div id="popularity" class=""></div>
<div id="new-arrival" class="new-arrival"></div>
<div id="popularity" class="popularity"></div>
</div>
{{> product/shop-footer}}
<ul id="pos-nav" class="nav hide">
<li class="active color">首页</li>
<li>上新</li>
<li>人气</li>
<li class="active color homeData">首页</li>
<li class="newData">上新</li>
<li class='hotData'>人气</li>
<li>
<a href="#" target="_blank">全部商品</a>
</li>
</ul>
<ul id="pos-list" class="nav hide">
<ul id="pos-list" class="home-sub-nav pos-list nav hide">
<li class="new active">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
... ...
<ul id="list-nav" class="list-nav clearfix">
<ul id="list-nav" class="home-sub-nav list-nav clearfix">
<li class="new active">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
... ...