Authored by 郭成尧

filter-data-load

... ... @@ -25,13 +25,20 @@
<div class="tab">
<ul class="shop-tabs tab-navs" data-sticky>
<li class="shop-tab-nav tab-nav active">
<a href="#red-index" data-trigger="tab">红人首页</a>
<a href="#red-index" data-trigger="tab" data-funFilterHide>红人首页</a>
</li>
<em>|</em>
<li class="shop-tab-nav tab-nav">
<a href="#all-goods" data-trigger="tab" data-funGetFilter data-funGetGoodsList>全部商品</a>
<a href="#all-goods" data-trigger="tab"
data-funFilterShow
data-funGetGoodsList>全部商品</a>
</li>
</ul>
{{!--筛选tab--}}
<div class="filter-box">
{{> product/filter-tab}}
{{> common/filter}}
</div>
<div class="tab-panels">
{{!--shop-tab: 红人首页--}}
<div id="red-index" class="tab-panel active">
... ... @@ -137,9 +144,6 @@
{{!--shop-tab: 全部商品--}}
<div id="all-goods" class="tab-panel">
<div class="good-list-page yoho-page">
{{!--筛选tab--}}
{{> product/filter-tab}}
<div id="goods-container" class="goods-container">
<div class="firstscreen-goods container clearfix"></div>
{{!--<div class="search-divide">正在加载...</div>--}}
... ... @@ -148,7 +152,6 @@
<div class="sale-goods container clearfix"></div>
<div class="price-goods container clearfix hide"></div>
<div class="discount-goods container clearfix hide"></div>
{{> common/filter}}
</div>
</div>
</div>
... ...
... ... @@ -21,9 +21,9 @@ let $pgc = $goodsContainer.children('.price-goods');
let $dgc = $goodsContainer.children('.discount-goods');
let $listNav = $('#list-nav'); // 筛选项列表
let $pre = $listNav.find('.active'); // 记录进入筛选前的active项,初始为选中项
let $filterBox = $('.filter-box');
let $filterBody = $('.filter-body');
let allGoodsTabClickTimes = 0;
let navInfo = {
price: {
order: 1,
... ... @@ -116,39 +116,36 @@ function getGoodsList() {
* 加载筛选数据
*/
function getFilter() {
if (allGoodsTabClickTimes === 0) {
// 第一次点进来调用
$.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/product/search/filter',
data: defaultOpt,
success: function(data) {
if (data) { // 判断需要再严禁些,确定数据正常后再 ++
allGoodsTabClickTimes++;
}
$goodsContainer.append(data);
$.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/product/search/filter',
data: defaultOpt,
success: function(data) {
$goodsContainer.append(data);
// 初始化filter&注册filter回调
filter.initFilter({
fCbFn: getGoodsList,
hCbFn: function() {
// 初始化filter&注册filter回调
filter.initFilter({
fCbFn: getGoodsList,
hCbFn: function() {
// 切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
}
});
// 切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
}
});
$filterBody = $('.filter-body');
}
});
}
$filterBody = $('.filter-body');
}
});
}
// 绑定 getfilter 方法,在点击全部商品 Tab 时调用
Tab.prototype.getfilter = getFilter;
Tab.prototype.getgoodslist = getGoodsList;
Tab.prototype.getgoodslist = getGoodsList; // 获取商品列表
Tab.prototype.filterhide = function() { // 隐藏筛选 TAB
$filterBox.css('display', 'none');
};
Tab.prototype.filtershow = function() { // 显示筛选 TAB
$filterBox.css('display', 'block');
};
$listNav.bind('contextmenu', function() {
return false;
... ... @@ -262,3 +259,4 @@ $listNav.on('touchend touchcancel', function(e) {
}
}
});
getFilter();
... ...
.filter-box {
display: none;
.list-nav {
border-top: 2px solid #fff;
border-bottom: 1px solid #e6e6e6;
> li {
float: left;
width: 20%;
height: 33PX;
line-height: 33PX;
text-align: center;
font-size: 14PX;
}
.bytouch {
background: #eee;
}
a {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
color: #999;
}
.nav-txt {
display: inline-block;
height: 100%;
box-sizing: border-box;
}
.active > a {
color: #000;
.iconfont {
color: #999;
&.cur {
color: #000;
}
}
}
.new .iconfont {
transform: scale(0.8);
font-weight: bold;
font-size: 12PX;
}
.filter .iconfont {
font-size: 12PX;
transition: transform 0.1 ease-in;
}
.filter.active .iconfont {
transform: rotate(-180deg);
}
.icon {
position: relative;
i {
position: absolute;
transform: scale(0.8);
font-weight: bold;
}
.up {
top: -11PX;
}
.down {
top: -4PX;
}
}
}
}
... ...
... ... @@ -5,3 +5,4 @@
@import "reds-shop/header";
@import "reds-shop/nav-tab";
@import "reds-shop/section";
@import "reds-shop/nav";
... ...