Authored by 梁志锋

品牌一览支持轮播和品牌手滑的样式调整,以及商品详情页的touchend改成hammer手势 code review by zhangzheng

@@ -11,8 +11,9 @@ var $ = require('jquery'), @@ -11,8 +11,9 @@ var $ = require('jquery'),
11 11
12 var swiper, 12 var swiper,
13 $fixTitleBar, 13 $fixTitleBar,
14 - $brandList = $('.brand-list');  
15 -var $icon = $('.search-icon'); 14 + $brandList = $('.brand-list'),
  15 + $icon = $('.search-icon'),
  16 + hotBrandsSwiper;
16 17
17 var searchH = $('.newbrand-search').outerHeight(), 18 var searchH = $('.newbrand-search').outerHeight(),
18 headerH = $('.yoho-header').outerHeight(), 19 headerH = $('.yoho-header').outerHeight(),
@@ -23,6 +24,14 @@ var brandsData, @@ -23,6 +24,14 @@ var brandsData,
23 $keyword, 24 $keyword,
24 clearTextHammer; 25 clearTextHammer;
25 26
  27 +//热门品牌滑动
  28 +hotBrandsSwiper = new Swiper('.brands-swiper', {
  29 + grabCursor: true,
  30 + slidesPerView: 'auto',
  31 + wrapperClass: 'brands-list',
  32 + slideElement: 'li'
  33 +});
  34 +
26 swiper = new Swiper('.swiper-container', { 35 swiper = new Swiper('.swiper-container', {
27 lazyLoading: true, 36 lazyLoading: true,
28 loop: true, 37 loop: true,
@@ -37,12 +46,16 @@ $('.yoho-header').css({ @@ -37,12 +46,16 @@ $('.yoho-header').css({
37 top: 0 46 top: 0
38 }); 47 });
39 48
  49 +if ($('.banner-top').length > 0) {
  50 + $('.hot-brands').css('padding-top', '0');
  51 +}
  52 +
40 $fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>'); 53 $fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
41 $fixTitleBar.css({ 54 $fixTitleBar.css({
42 position: 'fixed', 55 position: 'fixed',
43 top: brandSwipe 56 top: brandSwipe
44 }).hide(); 57 }).hide();
45 -minBrandListTop = brandSwipe + $('.hot-brand').outerHeight() + $('.banner-top').outerHeight(); 58 +minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
46 $brandList.last().append($fixTitleBar); 59 $brandList.last().append($fixTitleBar);
47 60
48 function scrollHandler() { 61 function scrollHandler() {
@@ -5,12 +5,14 @@ @@ -5,12 +5,14 @@
5 */ 5 */
6 var $ = require('jquery'), 6 var $ = require('jquery'),
7 Swiper = require('yoho.iswiper'), 7 Swiper = require('yoho.iswiper'),
  8 + Hammer = require('yoho.hammer'),
8 lazyLoad = require('yoho.lazyload'); 9 lazyLoad = require('yoho.lazyload');
9 10
10 var goodsSwiper, 11 var goodsSwiper,
11 $discountFolder = $('.goodsDiscount .discount-folder'), 12 $discountFolder = $('.goodsDiscount .discount-folder'),
12 $discountArrow = $('.goodsDiscount .first-item span'); 13 $discountArrow = $('.goodsDiscount .first-item span');
13 14
  15 +var goodsDiscountHammer = new Hammer(document.getElementById('goodsDiscount'));
14 16
15 require('./desc'); 17 require('./desc');
16 require('./comments-consults'); 18 require('./comments-consults');
@@ -38,7 +40,7 @@ if (0 === $('.goodsDiscount .discount-folder').children().length) { @@ -38,7 +40,7 @@ if (0 === $('.goodsDiscount .discount-folder').children().length) {
38 } 40 }
39 41
40 //goods-discount下拉按钮点击事件 42 //goods-discount下拉按钮点击事件
41 -$('.goodsDiscount').on('touchend', function(e) { 43 +goodsDiscountHammer.on('tap', function(e) {
42 if ($discountFolder.is(':hidden')) { 44 if ($discountFolder.is(':hidden')) {
43 $discountArrow.removeClass('icon-down').addClass('icon-up').html('&#xe608;'); 45 $discountArrow.removeClass('icon-down').addClass('icon-up').html('&#xe608;');
44 $discountFolder.slideDown(); 46 $discountFolder.slideDown();
@@ -46,7 +48,7 @@ $('.goodsDiscount').on('touchend', function(e) { @@ -46,7 +48,7 @@ $('.goodsDiscount').on('touchend', function(e) {
46 $discountArrow.removeClass('icon-up').addClass('icon-down').html('&#xe609;'); 48 $discountArrow.removeClass('icon-up').addClass('icon-down').html('&#xe609;');
47 $discountFolder.slideUp(); 49 $discountFolder.slideUp();
48 } 50 }
49 -  
50 return false; 51 return false;
51 }); 52 });
  53 +
52 require('./like'); 54 require('./like');
@@ -75,6 +75,10 @@ @@ -75,6 +75,10 @@
75 background-color:#f8f8f8; 75 background-color:#f8f8f8;
76 } 76 }
77 77
  78 + .hot-brands {
  79 + padding-top: 178rem / $pxConvertRem;
  80 + }
  81 +
78 .hot-brand { 82 .hot-brand {
79 margin: (30rem / $pxConvertRem) 0 0; 83 margin: (30rem / $pxConvertRem) 0 0;
80 84
@@ -64,7 +64,7 @@ @@ -64,7 +64,7 @@
64 {{/vipLevel}} 64 {{/vipLevel}}
65 65
66 {{# goodsDiscount}} 66 {{# goodsDiscount}}
67 - <div class="goodsDiscount"> 67 + <div class="goodsDiscount" id="goodsDiscount">
68 {{# list}} 68 {{# list}}
69 {{#if @first}} 69 {{#if @first}}
70 {{#if text}} 70 {{#if text}}