Authored by 梁志锋

update

... ... @@ -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,8 +37,11 @@ if (kidsType) {
$curNav = $navList.children('.focus');
$('#maybe-like-nav').delegate('li', 'tap', function() {
var $this = $(this),
navHammer = new Hammer($navList[0]);
navHammer.on('tap', function(e) {
var $this = $(e.target).closest('li'),
//$('#maybe-like-nav').delegate('li', 'touchstart', function() {
// var $this = $(this),
$goods = $('.goods-list'),
$content;
... ... @@ -59,67 +64,74 @@ $('#maybe-like-nav').delegate('li', 'tap', function() {
$(document).trigger('scroll'); //Trigger lazyLoad
});
$('.maybe-like p').on('touchstart', function (e) {
search();
});
//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() {
}
});
search();
}
});
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';
}
return;
}
$.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() {
}
});
num = $goodList.find('.good-info').length;
}
return;
}
$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'));
}
});
}
});
\ No newline at end of file
loading = false;
page++;
},
error: function() {
tip.show('网络断开连接了~');
loading = false;
}
});
}
\ 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
... ...
... ... @@ -17,7 +17,6 @@
height: 192rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
}
.classify-logo {
... ...
... ... @@ -31,6 +31,8 @@
img {
vertical-align: middle;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
... ...
<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">
... ...