品牌一览支持轮播和品牌手滑的样式调整,以及商品详情页的touchend改成hammer手势 code review by zhangzheng
Showing
4 changed files
with
25 additions
and
6 deletions
@@ -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(''); | 45 | $discountArrow.removeClass('icon-down').addClass('icon-up').html(''); |
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(''); | 48 | $discountArrow.removeClass('icon-up').addClass('icon-down').html(''); |
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}} |
-
Please register or login to post a comment