fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 34407a08b1bdeef503afe16de8c4a8f00c65582a 2 parents 1c4e6427 f9d48a54

Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

Inline Side-by-side
Showing 9 changed files with 139 additions and 118 deletions
... ... @@ -45,6 +45,7 @@ navHammer.on('tap', function(event) {
});
event.srcEvent.stopPropagation();
return false;
});
mobileWrapHammer = new Hammer($('.mobile-wrap')[0]);
... ... @@ -62,11 +63,12 @@ mobileWrapHammer.on('tap', function(e) {
$('.overlay').hide();
}, 300);
e.srcEvent.stopPropagation();
return false;
}
});
//点击一级导航，弹出二级导航
$sideNav.on('touchstart', 'li', function () {
$sideNav.on('touchend', 'li', function () {
if ($(this).find('.sub-nav').size() > 0) {
$('.sub-nav').removeClass('show');
$(this).find('.sub-nav').addClass('show');
... ... @@ -75,10 +77,12 @@ $sideNav.on('touchstart', 'li', function () {
//返回一级导航，收起二级导航
$('.sub-nav').each(function () {
$(this).find('li').eq(0).on('touchstart', function (e) {
$(this).find('li').eq(0).on('touchend', function (e) {
$('.sub-nav').removeClass('show');
e.stopPropagation();
return false;
});
}).on('touchend', function() {
$('.sub-nav').find('li').removeClass('current');
});
//头部banner轮播
... ...
... ... @@ -5,10 +5,12 @@
*/
var $ = require('jquery'),
Hammer = require('hammer'),
tip = require('../plugin/tip'),
lazyLoad = require('yoho.lazyload');
var winH = $(window).height(),
var navHammer,
winH = $(window).height(),
loadMoreH = $('#load-more').height(),
$goodList = $('#goods-list'),
loading = false,
... ... @@ -35,91 +37,101 @@ if (kidsType) {
$curNav = $navList.children('.focus');
$('#maybe-like-nav').delegate('li', 'tap', function() {
var $this = $(this),
$goods = $('.goods-list'),
$content;
if (lifestyleType) {
navHammer = new Hammer($navList[0]);
navHammer.on('tap', function(e) {
var $this = $(e.target).closest('li'),
$goods = $('.goods-list'),
$content;
if ($this.hasClass('focus')) {
return;
}
if ($this.hasClass('focus')) {
return;
}
index = $this.index();
index = $this.index();
$this.addClass('focus');
$curNav.removeClass('focus');
$this.addClass('focus');
$curNav.removeClass('focus');
$goods.not('.hide').addClass('hide');
$content = $goods.eq(index);
$content.removeClass('hide');
$goods.not('.hide').addClass('hide');
$content = $goods.eq(index);
$content.removeClass('hide');
$curNav = $this;
$curNav = $this;
$(document).trigger('scroll'); //Trigger lazyLoad
});
}
$(document).trigger('scroll'); //Trigger lazyLoad
});
//srcoll to load more
$(window).scroll(function () {
if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH - 50) {
if (loading) {
return;
}
loading = true;
//num = $goodList.find('.good-info').length;
$.ajax({
type: 'GET',
url: url,
data: {
page: page + 1
},
success: function(data) {
if (data === ' ') {
loading = true;
if (gender) {
if (gender === '1,3') {
url = '/boys/bottomBanner';
} else {
url = '/girls/bottomBanner';
}
$.ajax({
type: 'GET',
url: url,
success: function(data) {
if (data) {
$('#load-more-img').show();
$('#load-more-img a').attr('href', data.url);
$('#load-more-img a > img').attr('src', data.img);
}
},
error: function() {
function search() {
if (loading) {
return;
}
loading = true;
//num = $goodList.find('.good-info').length;
$.ajax({
type: 'GET',
url: url,
data: {
page: page + 1
},
success: function(data) {
if (data === ' ') {
loading = true;
if (gender) {
if (gender === '1,3') {
url = '/boys/bottomBanner';
} else {
url = '/girls/bottomBanner';
}
$.ajax({
type: 'GET',
url: url,
success: function(data) {
if (data) {
$('#load-more-img').show();
$('#load-more-img a').attr('href', data.url);
$('#load-more-img a > img').attr('src', data.img);
}
});
},
error: function() {
}
});
}
return;
}
return;
}
num = $goodList.find('.good-info').length;
$goodList.append(data);
num = $goodList.find('.good-info').length;
// 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题
if (num === 0) {
lazyLoad($goodList.find('.good-info').find('img.lazy'));
} else {
lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
}
$goodList.append(data);
loading = false;
page++;
},
error: function() {
tip.show('网络断开连接了~');
loading = false;
// 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题
if (num === 0) {
lazyLoad($goodList.find('.good-info').find('img.lazy'));
} else {
lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
}
});
}
loading = false;
page++;
},
error: function() {
tip.show('网络断开连接了~');
loading = false;
}
});
}
$('.maybe-like p').on('touchstart', function (e) {
search();
});
//srcoll to load more
$(window).scroll(function () {
if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH - 50) {
search();
}
});
\ No newline at end of file
... ...
... ... @@ -39,16 +39,6 @@ $searchBox.find('.clear-text').click(function () {
$searchBox.find('input').val('').trigger('focus');
});
// clearTextHammer = new Hammer($searchBox.find('.clear-text')[0]);
// clearTextHammer.on('tap', function(e) {
// $searchBox.find('input').val('').trigger('focus');
// });
$searchBox.find('.search-icon').click(function () {
$indexSearch.submit();
});
// searchIconHammer = new Hammer($searchBox.find('.search-icon')[0]);
// searchIconHammer.on('tap', function(e) {
// $indexSearch.submit();
// });
\ No newline at end of file
});
\ No newline at end of file
... ...
.good-info {
float: left;
width: 46.4%;
width: 276rem / $pxConvertRem;
height: 486rem / $pxConvertRem;
margin: 28rem / $pxConvertRem 0 0 2.4%;
margin: 0 (15rem / $pxConvertRem) (28rem / $pxConvertRem);
.tag-container {
height: 28rem / $pxConvertRem;
width: 100%;
overflow: hidden;
.good-tag {
display: block;
... ... @@ -15,23 +15,27 @@
height: 28rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
text-align: center;
line-height: 32rem / $pxConvertRem;
line-height: 28rem / $pxConvertRem;
box-sizing: border-box;
margin-right: 4rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
}
.new-tag {
width: 60rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.renew-tag {
width: 90rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.sale-tag {
width: 60rem / $pxConvertRem;
background-color: #ff575c;
... ... @@ -43,21 +47,35 @@
color: #fff;
}
.limit-tag {
box-sizing: border-box;
width: 90rem / $pxConvertRem;
border: 1px solid #000;
color: #000;
line-height: 24rem / $pxConvertRem;
}
}
}
.good-detail-img {
position: relative;
.good-islike {
position: absolute;
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
top: 0rem / $pxConvertRem;
right: 0rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
text-align: center;
color: #b0b0b0;
text-decoration: none;
}
.good-like {
color: #d72928;
}
img {
display: block;
width: 100%;
// height: 366rem / $pxConvertRem;
height: 366rem / $pxConvertRem;
}
.few-tag {
... ...
... ... @@ -17,7 +17,6 @@
height: 192rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
&:nth-child(-n+3) {
border-bottom: none;
}
... ...
... ... @@ -16,7 +16,7 @@
li {
float: left;
width: 158rem / $pxConvertRem;
height: 154rem / $pxConvertRem;
height: 174rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow: hidden;
... ... @@ -31,6 +31,8 @@
img {
vertical-align: middle;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
... ...
... ... @@ -2,7 +2,7 @@
background: #fff;
padding-left: 15rem / $pxConvertRem;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
// border-bottom: 1px solid #ccc;
margin-top: 30rem / $pxConvertRem;
.title {
height: 104rem / $pxConvertRem;
... ... @@ -59,6 +59,7 @@
.load-more-img {
padding-left: 0;
height: 200rem / $pxConvertRem;
border-top: 1px solid #ccc;
overflow: hidden;
img {
display: block;
... ...
... ... @@ -110,12 +110,12 @@
}
.sub-nav {
// display: none;
display: none;
position: fixed;
bottom: 0;
top: 0;
right: 100rem / $pxConvertRem;
left: 0;
bottom: 0;
// right: 100rem / $pxConvertRem;
width: 100%;
background: #fff !important;
// z-index: 2;
... ... @@ -185,7 +185,7 @@
}
.sub-nav.show {
display: block;
@include transform(translateX(0));
@include transition(transform 0.3s);
}
\ No newline at end of file
... ...
<div class="maybe-like">
<p class="title">
<i class="icon"></i>
<span>你可能喜欢</span>
</p>
<ul id="maybe-like-nav" class="maybe-like-nav clearfix">
<li class="maybe-like-nav-item focus">新品到着</li>
<li class="maybe-like-nav-item">人气单品</li>
</ul>
<ul id="maybe-like-nav" class="maybe-like-nav clearfix">
<li class="maybe-like-nav-item focus">新品到着</li>
<li class="maybe-like-nav-item">人气单品</li>
</ul>
<div id="goods-list">
{{# goodsContainer}}
<div class="goods-list {{^show}}hide{{/show}}">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
{{/ goodsContainer}}
</div>
<div id="goods-list">
{{# goodsContainer}}
<div class="goods-list {{^show}}hide{{/show}}">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
{{/ goodsContainer}}
</div>
<div id="load-more-info" class="load-more-info">
<div class="loading status hide">
... ...