Authored by 梁志锋

update

@@ -5,10 +5,12 @@ @@ -5,10 +5,12 @@
5 */ 5 */
6 6
7 var $ = require('jquery'), 7 var $ = require('jquery'),
  8 + Hammer = require('hammer'),
8 tip = require('../plugin/tip'), 9 tip = require('../plugin/tip'),
9 lazyLoad = require('yoho.lazyload'); 10 lazyLoad = require('yoho.lazyload');
10 11
11 -var winH = $(window).height(), 12 +var navHammer,
  13 + winH = $(window).height(),
12 loadMoreH = $('#load-more').height(), 14 loadMoreH = $('#load-more').height(),
13 $goodList = $('#goods-list'), 15 $goodList = $('#goods-list'),
14 loading = false, 16 loading = false,
@@ -35,8 +37,11 @@ if (kidsType) { @@ -35,8 +37,11 @@ if (kidsType) {
35 37
36 $curNav = $navList.children('.focus'); 38 $curNav = $navList.children('.focus');
37 39
38 -$('#maybe-like-nav').delegate('li', 'tap', function() {  
39 - var $this = $(this), 40 +navHammer = new Hammer($navList[0]);
  41 +navHammer.on('tap', function(e) {
  42 + var $this = $(e.target).closest('li'),
  43 +//$('#maybe-like-nav').delegate('li', 'touchstart', function() {
  44 +// var $this = $(this),
40 $goods = $('.goods-list'), 45 $goods = $('.goods-list'),
41 $content; 46 $content;
42 47
@@ -59,67 +64,74 @@ $('#maybe-like-nav').delegate('li', 'tap', function() { @@ -59,67 +64,74 @@ $('#maybe-like-nav').delegate('li', 'tap', function() {
59 $(document).trigger('scroll'); //Trigger lazyLoad 64 $(document).trigger('scroll'); //Trigger lazyLoad
60 }); 65 });
61 66
  67 +$('.maybe-like p').on('touchstart', function (e) {
  68 + search();
  69 +});
  70 +
62 //srcoll to load more 71 //srcoll to load more
63 $(window).scroll(function () { 72 $(window).scroll(function () {
64 if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH - 50) { 73 if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH - 50) {
65 - if (loading) {  
66 - return;  
67 - }  
68 - loading = true;  
69 -  
70 - //num = $goodList.find('.good-info').length;  
71 - $.ajax({  
72 - type: 'GET',  
73 - url: url,  
74 - data: {  
75 - page: page + 1  
76 - },  
77 - success: function(data) {  
78 - if (data === ' ') {  
79 - loading = true;  
80 - if (gender) {  
81 - if (gender === '1,3') {  
82 - url = '/boys/bottomBanner';  
83 - } else {  
84 - url = '/girls/bottomBanner';  
85 - }  
86 - $.ajax({  
87 - type: 'GET',  
88 - url: url,  
89 - success: function(data) {  
90 - if (data) {  
91 - $('#load-more-img').show();  
92 - $('#load-more-img a').attr('href', data.url);  
93 - $('#load-more-img a > img').attr('src', data.img);  
94 - }  
95 - },  
96 - error: function() {  
97 - }  
98 - }); 74 + search();
  75 + }
  76 +});
99 77
  78 +function search() {
  79 + if (loading) {
  80 + return;
  81 + }
  82 + loading = true;
  83 +
  84 + //num = $goodList.find('.good-info').length;
  85 + $.ajax({
  86 + type: 'GET',
  87 + url: url,
  88 + data: {
  89 + page: page + 1
  90 + },
  91 + success: function(data) {
  92 + if (data === ' ') {
  93 + loading = true;
  94 + if (gender) {
  95 + if (gender === '1,3') {
  96 + url = '/boys/bottomBanner';
  97 + } else {
  98 + url = '/girls/bottomBanner';
100 } 99 }
101 - return;  
102 - } 100 + $.ajax({
  101 + type: 'GET',
  102 + url: url,
  103 + success: function(data) {
  104 + if (data) {
  105 + $('#load-more-img').show();
  106 + $('#load-more-img a').attr('href', data.url);
  107 + $('#load-more-img a > img').attr('src', data.img);
  108 + }
  109 + },
  110 + error: function() {
  111 + }
  112 + });
103 113
104 - num = $goodList.find('.good-info').length; 114 + }
  115 + return;
  116 + }
105 117
106 - $goodList.append(data); 118 + num = $goodList.find('.good-info').length;
107 119
108 - // 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题  
109 - if (num === 0) {  
110 - lazyLoad($goodList.find('.good-info').find('img.lazy'));  
111 - } else {  
112 - lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));  
113 - } 120 + $goodList.append(data);
114 121
115 - loading = false;  
116 - page++;  
117 - },  
118 - error: function() {  
119 - tip.show('网络断开连接了~');  
120 - loading = false; 122 + // 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题
  123 + if (num === 0) {
  124 + lazyLoad($goodList.find('.good-info').find('img.lazy'));
  125 + } else {
  126 + lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
121 } 127 }
122 - });  
123 - }  
124 128
125 -});  
  129 + loading = false;
  130 + page++;
  131 + },
  132 + error: function() {
  133 + tip.show('网络断开连接了~');
  134 + loading = false;
  135 + }
  136 + });
  137 +}
@@ -39,16 +39,6 @@ $searchBox.find('.clear-text').click(function () { @@ -39,16 +39,6 @@ $searchBox.find('.clear-text').click(function () {
39 $searchBox.find('input').val('').trigger('focus'); 39 $searchBox.find('input').val('').trigger('focus');
40 }); 40 });
41 41
42 -// clearTextHammer = new Hammer($searchBox.find('.clear-text')[0]);  
43 -// clearTextHammer.on('tap', function(e) {  
44 -// $searchBox.find('input').val('').trigger('focus');  
45 -// });  
46 -  
47 $searchBox.find('.search-icon').click(function () { 42 $searchBox.find('.search-icon').click(function () {
48 $indexSearch.submit(); 43 $indexSearch.submit();
49 -});  
50 -  
51 -// searchIconHammer = new Hammer($searchBox.find('.search-icon')[0]);  
52 -// searchIconHammer.on('tap', function(e) {  
53 -// $indexSearch.submit();  
54 -// });  
  44 +});
@@ -17,7 +17,6 @@ @@ -17,7 +17,6 @@
17 height: 192rem / $pxConvertRem; 17 height: 192rem / $pxConvertRem;
18 border-bottom: 1px solid #e0e0e0; 18 border-bottom: 1px solid #e0e0e0;
19 border-right: 1px solid #e0e0e0; 19 border-right: 1px solid #e0e0e0;
20 - border-top: 1px solid #e0e0e0;  
21 } 20 }
22 21
23 .classify-logo { 22 .classify-logo {
@@ -31,6 +31,8 @@ @@ -31,6 +31,8 @@
31 31
32 img { 32 img {
33 vertical-align: middle; 33 vertical-align: middle;
  34 + width: 100%;
  35 + height: 100%;
34 max-width: 100%; 36 max-width: 100%;
35 max-height: 100%; 37 max-height: 100%;
36 } 38 }
1 <div class="maybe-like"> 1 <div class="maybe-like">
2 - <p class="title">  
3 - <i class="icon"></i>  
4 - <span>你可能喜欢</span>  
5 - </p> 2 + <ul id="maybe-like-nav" class="maybe-like-nav clearfix">
  3 + <li class="maybe-like-nav-item focus">新品到着</li>
  4 + <li class="maybe-like-nav-item">人气单品</li>
  5 + </ul>
6 6
7 - <ul id="maybe-like-nav" class="maybe-like-nav clearfix">  
8 - <li class="maybe-like-nav-item focus">新品到着</li>  
9 - <li class="maybe-like-nav-item">人气单品</li>  
10 - </ul>  
11 -  
12 - <div id="goods-list">  
13 - {{# goodsContainer}}  
14 - <div class="goods-list {{^show}}hide{{/show}}">  
15 - {{# goods}}  
16 - {{> good}}  
17 - {{/ goods}}  
18 - </div>  
19 - {{/ goodsContainer}}  
20 - </div> 7 + <div id="goods-list">
  8 + {{# goodsContainer}}
  9 + <div class="goods-list {{^show}}hide{{/show}}">
  10 + {{# goods}}
  11 + {{> good}}
  12 + {{/ goods}}
  13 + </div>
  14 + {{/ goodsContainer}}
  15 + </div>
21 16
22 <div id="load-more-info" class="load-more-info"> 17 <div id="load-more-info" class="load-more-info">
23 <div class="loading status hide"> 18 <div class="loading status hide">