Authored by 梁志锋

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

... ... @@ -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);
}
//修改加入购物车的文字和背景
... ...
... ... @@ -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,
... ...
/**
* 弹出层可以滚动,遮盖层禁止滚动插件
*
* @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;
\ No newline at end of file
... ...
... ... @@ -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 {
... ...