Merge remote-tracking branch 'remotes/origin/develop/wap' into beta/wap

梁志锋
Commit 039d02aff88a492a7d8b2ddf698e176058176085 2 parents 4503c061 d38d6371
Showing 4 changed files with 133 additions and 125 deletions
static/js/cart/chose-panel.js
static/js/home/home.js
static/js/plugin/inner-scroll.js
static/sass/home/_side-nav.scss
--- a/static/js/cart/chose-panel.js
View file @039d02a
+++ b/static/js/cart/chose-panel.js
View file @039d02a
@@ -13,6 +13,8 @@ var $ = require('jquery'),
     tip = require('../plugin/tip'),
     loading = require('../plugin/loading');
+var innerScroll = require('../plugin/inner-scroll');
+
 var $chosePanel = $('#chose-panel'),
     $num,
     $chosed,
@@ -31,6 +33,7 @@ var $chosePanel = $('#chose-panel'),
     cbFn,
     $allChoseItems,
     queryString,
+    $choseArea,
     $soonSoldOut = $('.soonSoldOut-tag'),
     $yohoPage = $('.yoho-page');
@@ -46,6 +49,7 @@ function init() {
     $curSizeBlock = null;
     queryString = $.queryString();
     $imgsThumb = $('.chose-panel').find('.thumb');
+    $choseArea = $('.chose-panel .main .chose-items');
     $allChoseItems = $('.chose-items');
     $sizeRowList = $('.size-list ul');
     $colorRowList = $('.color-list ul');
@@ -71,101 +75,6 @@ function setEditModeWithSknId(sknId, isThisGoodSelected) {
     isSelected = isThisGoodSelected;
 }
-function preventDefault(e) {
-    e = e || window.event;
-    e.preventDefault && e.preventDefault();
-    e.returnValue = false;
-}
-
-function stopPropagation(e) {
-    e = e || window.event;
-    e.stopPropagation && e.stopPropagation();
-    e.cancelBubble = false;
-}
-
-function innerScroll(e) {
-    var delta = e.wheelDelta || e.originalEvent.wheelDelta || e.detail || 0,
-        box = $(this).get(0);
-
-    // 阻止冒泡到document
-    // document上已经preventDefault
-    stopPropagation(e);
-
-
-    if ($(box).height() + box.scrollTop >= box.scrollHeight) {
-        if (delta < 0) {
-            preventDefault(e);
-            return false;
-        }
-    }
-    if (box.scrollTop === 0) {
-        if (delta > 0) {
-            preventDefault(e);
-            return false;
-        }
-    }
-}
-
-function disableScroll() {
-    var startX, startY;
-
-    var $choseArea = $('.chose-panel .main .chose-items');
-
-    // 内部可滚
-    $choseArea.on('mousewheel', innerScroll);
-
-    // 移动端touch重写
-    $choseArea.on('touchstart', function(e) {
-        startX = e.originalEvent.changedTouches[0].pageX;
-        startY = e.originalEvent.changedTouches[0].pageY;
-    });
-
-    // 仿innerScroll方法
-    $choseArea.on('touchmove', function(e) {
-        var deltaX = e.originalEvent.changedTouches[0].pageX - startX,
-            deltaY = e.originalEvent.changedTouches[0].pageY - startY;
-
-        var box = $(this).get(0);
-
-        e.stopPropagation();
-
-
-        // 只能纵向滚
-        if (Math.abs(deltaY) < Math.abs(deltaX)) {
-            e.preventDefault();
-            return false;
-        }
-
-
-        if ($(box).height() + box.scrollTop >= box.scrollHeight) {
-            if (deltaY < 0) {
-                e.preventDefault();
-                return false;
-            }
-        }
-        if (box.scrollTop === 0) {
-            if (deltaY > 0) {
-                e.preventDefault();
-                return false;
-            }
-        }
-    });
-
-    $(document).on('mousewheel', preventDefault);
-    $(document).on('touchmove', preventDefault);
-}
-
-function enableScroll() {
-    var $choseArea = $('.chose-panel .main .chose-items');
-
-    $choseArea.off('touchstart');
-    $choseArea.off('touchmove');
-    $choseArea.off('mousewheel');
-
-    $(document).off('mousewheel', preventDefault);
-    $(document).off('touchmove', preventDefault);
-}
-
 //删除面板
 function removePannel() {
     var $pannel = $('.chose-panel'),
@@ -220,13 +129,13 @@ function show(html, cb) {
     cbFn = cb;
-    disableScroll();
+    innerScroll.disableScroll($choseArea);
 }
 //隐藏当前Panel
 function hide() {
     $('.chose-panel').hide();
-    enableScroll();
+    innerScroll.enableScroll($choseArea);
 }
 //修改加入购物车的文字和背景
--- a/static/js/home/home.js
View file @039d02a
+++ b/static/js/home/home.js
View file @039d02a
@@ -19,9 +19,12 @@ var $ = require('jquery'),
 var start = 0,
     swiperClass,
     $logotrans = $('.home-header .logo'),
+    $choseArea =  $('.side-nav .first'),
     openSideNav = false,
     isen = true;
+var innerScroll = require('../plugin/inner-scroll');
+
 lazyLoad($('img.lazy'));
 $('.nav-btn').on('touchstart', function(event) {
@@ -35,6 +38,8 @@ $('.nav-btn').on('touchstart', function(event) {
         $sideNav.css('pointer-events', 'auto');
     }, 400);
+    innerScroll.disableScroll($choseArea);
+
     return false;
 });
@@ -49,16 +54,13 @@ function hideSideBar() {
 }
 $('.overlay').on('touchstart', function(e) {
+    innerScroll.enableScroll($choseArea);
     hideSideBar();
     return false;
 });
-$sideNav.on('touchmove', function(e) {
-    return false;
-});
-
-//点击一级导航，弹出二级导航
-$sideNav.on('touchstart', 'li', function(e) {
+// 点击一级导航，弹出二级导航
+$sideNav.on('touchend', 'li', function(e) {
     if ($(this).find('.sub-nav').size() > 0) {
         $('.sub-nav').removeClass('show');
         $(this).find('.sub-nav').addClass('show');
@@ -70,7 +72,7 @@ $sideNav.on('touchstart', 'li', function(e) {
     }
 });
-//返回一级导航，收起二级导航
+// 返回一级导航，收起二级导航
 $subNav.each(function() {
     $(this).find('li').eq(0).on('touchend', function() {
         $sideNav.css('pointer-events', 'none');
@@ -99,7 +101,7 @@ highlight($sideNav);
 highlight($subNav);
-//头部banner轮播
+// 头部banner轮播
 if ($('.banner-swiper').find('li').size() > 1) {
     bannerSwiper = new Swiper('.banner-swiper', {
         lazyLoading: true,
@@ -113,7 +115,7 @@ if ($('.banner-swiper').find('li').size() > 1) {
     });
 }
-//热门品牌滑动
+// 热门品牌滑动
 hotBrandsSwiper = new Swiper('.brands-swiper', {
     grabCursor: true,
     slidesPerView: 'auto',
@@ -121,7 +123,7 @@ hotBrandsSwiper = new Swiper('.brands-swiper', {
     slideElement: 'li'
 });
-//推荐搭配滑动
+// 推荐搭配滑动
 recommendSwiper = new Swiper('.recommend-swiper', {
     grabCursor: true,
     slidesPerView: 'auto',
@@ -129,7 +131,7 @@ recommendSwiper = new Swiper('.recommend-swiper', {
     slideElement: 'li'
 });
-//潮品话题轮播
+// 潮品话题轮播
 if ($('.trend-topic-swiper').find('li').size() > 1) {
     trendTopicSwiper = new Swiper('.trend-topic-swiper', {
         loop: true,
@@ -141,7 +143,7 @@ if ($('.trend-topic-swiper').find('li').size() > 1) {
     });
 }
-//潮流上装/经典裤装等轮播
+// 潮流上装/经典裤装等轮播
 $('.category-swiper').each(function(i, index) {
     swiperClass = 'category-swiper' + i;
     $(this).addClass(swiperClass);
@@ -157,7 +159,7 @@ $('.category-swiper').each(function(i, index) {
     }
 });
-//logo动画
+// logo动画
 function tsAnimate() {
     start = start + 10;
     $logotrans.css({
@@ -196,7 +198,7 @@ $('.home-header .iconfont').on('touchstart', function() {
 // 底部留出tab 的高度
 window.reMarginFooter('.footer-tab');
-//set cookie
+// set cookie
 exports.set = function(c) {
     window.setCookie('_Channel', c, {
         expires: 365,
--- a/static/js/plugin/inner-scroll.js 0 → 100644
View file @039d02a
+++ b/static/js/plugin/inner-scroll.js 0 → 100644
View file @039d02a
+/**
+ * 弹出层可以滚动，遮盖层禁止滚动插件
+ *
+ * @author liangzhifeng<zhifeng.liang@yoho.cn>
+ * @date: 2016/02/22
+ */
+
+var $ = require('jquery');
+
+function preventDefault(e) {
+    e = e || window.event;
+    e.preventDefault && e.preventDefault();
+    e.returnValue = false;
+}
+
+function stopPropagation(e) {
+    e = e || window.event;
+    e.stopPropagation && e.stopPropagation();
+    e.cancelBubble = false;
+}
+
+function innerScroll(e) {
+    var delta = e.wheelDelta || e.originalEvent.wheelDelta || e.detail || 0,
+        box = $(this).get(0);
+
+    // 阻止冒泡到document
+    // document上已经preventDefault
+    stopPropagation(e);
+
+
+    if ($(box).height() + box.scrollTop >= box.scrollHeight) {
+        if (delta < 0) {
+            preventDefault(e);
+            return false;
+        }
+    }
+    if (box.scrollTop === 0) {
+        if (delta > 0) {
+            preventDefault(e);
+            return false;
+        }
+    }
+}
+
+function disableScroll($choseArea) {
+    var startX, startY;
+
+    // 内部可滚
+    $choseArea.on('mousewheel', innerScroll);
+
+    // 移动端touch重写
+    $choseArea.on('touchstart', function(e) {
+        startX = e.originalEvent.changedTouches[0].pageX;
+        startY = e.originalEvent.changedTouches[0].pageY;
+    });
+
+    // 仿innerScroll方法
+    $choseArea.on('touchmove', function(e) {
+        var deltaX = e.originalEvent.changedTouches[0].pageX - startX,
+            deltaY = e.originalEvent.changedTouches[0].pageY - startY;
+
+        var box = $(this).get(0);
+
+        e.stopPropagation();
+
+
+        // 只能纵向滚
+        if (Math.abs(deltaY) < Math.abs(deltaX)) {
+            e.preventDefault();
+            return false;
+        }
+
+
+        if ($(box).height() + box.scrollTop >= box.scrollHeight) {
+            if (deltaY < 0) {
+                e.preventDefault();
+                return false;
+            }
+        }
+        if (box.scrollTop === 0) {
+            if (deltaY > 0) {
+                e.preventDefault();
+                return false;
+            }
+        }
+    });
+
+    $(document).on('mousewheel', preventDefault);
+    $(document).on('touchmove', preventDefault);
+}
+
+function enableScroll($choseArea) {
+
+    $choseArea.off('touchstart');
+    $choseArea.off('touchmove');
+    $choseArea.off('mousewheel');
+
+    $(document).off('mousewheel', preventDefault);
+    $(document).off('touchmove', preventDefault);
+}
+
+exports.enableScroll = enableScroll;
+exports.disableScroll = disableScroll;
--- a/static/sass/home/_side-nav.scss
View file @039d02a
+++ b/static/sass/home/_side-nav.scss
View file @039d02a
@@ -14,7 +14,7 @@
     @include transition(all .3s);
     > ul {
-        margin-bottom: 16rem / $pxConvertRem;
+        margin-bottom: 20rem / $pxConvertRem;
         background: #fff;
         border-top: 1px solid #e0e0e0;
         border-bottom: 1px solid #e0e0e0;
@@ -22,8 +22,8 @@
     li {
         position: relative;
-        height: 64rem / $pxConvertRem;
-        line-height: 64rem / $pxConvertRem;
+        height: 80rem / $pxConvertRem;
+        line-height: 80rem / $pxConvertRem;
         background: #fff;
         &:after {
@@ -45,27 +45,21 @@
         a {
             display: block;
             height: 100%;
-            padding-left: 92rem / $pxConvertRem;
+            padding-left: 110rem / $pxConvertRem;
             color: #444;
         }
         em {
             font-weight: bold;
-            font-size: 24rem / $pxConvertRem;
+            font-size: 26rem / $pxConvertRem;
         }
         .title {
             display: inline-block;
             font-size: 36rem / $pxConvertRem;
             vertical-align: bottom;
-            padding-left: 20rem / $pxConvertRem;
             // 此处字体小于 12px， 先扩大，再scale缩小
             @include transform(scale(0.5));
-
-            -webkit-transform-origin: 0 50% 0;
-            -moz-transform-origin: 0 50% 0;
-            -ms-transform-origin: 0 50% 0;
-            transform-origin: 0 50% 0;
         }
         .nav-icon, .nav-img {
@@ -98,8 +92,8 @@
     .first {
         li {
-            height: 80rem / $pxConvertRem;
-            line-height: 80rem / $pxConvertRem;
+            height: 100rem / $pxConvertRem;
+            line-height: 100rem / $pxConvertRem;
             border-bottom: 1px solid #e0e0e0;
             &:last-child {
@@ -111,7 +105,7 @@
             }
             em {
-                font-size: 32rem / $pxConvertRem;
+                font-size: 36rem / $pxConvertRem;
             }
             .nav-img, .nav-icon {