fe / YOHOBUYWAP · Commits

Go to a project

Authored by zhangxiaoru
Commit cd546a9273ca66b88dbfe9bfdb84829adcbc179b 1 parent 87eed840

首页

Inline Side-by-side
Showing 6 changed files with 174 additions and 172 deletions
... ... @@ -17,6 +17,7 @@ var $ = require('jquery'),
scH,
$nav1 = $('#pos-nav'),
$nav2 = $('#pos-list'),
sTop,
isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;//判断浏览器类型
var tip = require('../plugin/tip'),
... ... @@ -61,6 +62,166 @@ var $listNav = $('#list-nav'),
$pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
searching;
//焦点效果
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
if ($('.multi-browse').find('li').size() > 1) {
multiSwiper = new Swiper('.multi-browse', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li',
watchSlidesVisibility: true
});
}
function tabChange(dom, index) {
var li = dom.eq(index),
sortSize = li.find('.iconfont').length;
dom.removeClass('active');
li.addClass('active');
dom.removeClass('color');
li.addClass('color');
}
//首页导航
$.jqtab = function(nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
var index = $(this).index(),
activeTab = $(this).attr('tab');
tabChange($(nav + ' li'), index);
tabChange($(posNav + ' li'), index);
$(main).hide();
$('#' + activeTab).fadeIn();
return false;
});
};
$.jqtab('#nav','#pos-nav','.main');
$('#wrapper').addClass('scroll-wrapper');
lazyLoad($('img.lazy'));
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
myScroll.on('scroll', function() {
sTop = -this.y;
if (sTop < imgH) {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
} //滑动距离不到导航1
} else if (sTop < imgH + nav1H + main1oH) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
}//滑动距离不到导航2
if (sTop < imgH + main1H) {
if (!$nav1.hasClass('fixed-top')) {
$nav1.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (- scH) + 'px)'
});
}
} else if (sTop < imgH + nav1H + main1H) {
if (!$nav1.hasClass('absolute')) {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
$nav1.css({
transform: 'translate(0, ' + (imgH + main1H - sTop - scH) + 'px)'
});
}
} else {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if ($nav2.hasClass('hide')) {
$nav2.removeClass('hide');
console.log(1)
}
console.log(sTop + '-----' + scH);
if (sTop < scH) {
if (!$nav2.hasClass('fixed-top')) {
$nav2.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (- scH) + 'px)'
});
}
}
// else {
// if (!$nav2.hasClass('absolute')) {
// $nav1.addClass('absolute')
// .removeClass('fixed-top');
// }
// $nav2.css({
// transform: 'translate(0, ' + (imgH + nav1H + main1oH + main2oH -sTop - scH) + 'px)'
// });
// }
}
$("#scroller").trigger('scroll');
});
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
if (!isIphone) {
return;
}
//window onload 后重新refresh iscroll
$(window).load(function() {
myScroll && myScroll.refresh();
imgH = $('#nav-top').outerHeight();
nav1H = $('#nav').outerHeight();
main1H = $('#nav-main').height();
main1oH = $('#nav-main').outerHeight();
nav2H = $('#list-nav').outerHeight();
main2oH = $('#goods-container').outerHeight();
setTimeout(function(){
scH = $('#scroller').outerHeight();
console.log(scH)
},2000);
});
function search(opt) {
var setting = {},
ext,
... ... @@ -202,6 +363,9 @@ function search(opt) {
loading.hideLoadingMask();
window.rePosFooter();
scH = $('#scroller').outerHeight();
console.log(scH)
},
error: function() {
tip.show('网络断开连接了~');
... ... @@ -334,12 +498,13 @@ $listNav.on('touchend touchcancel', function(e) {
});
function scrollHandler() {
//当scroll到1/4$goodsContainer高度后继续请求下一页数据
if ($(window).scrollTop() + winH >
$(document).height() - 0.25 * $goodsContainer.height() - 50) {
myScroll && myScroll.refresh();
if (sTop + winH > $('#scroller').height() - 0.25 * $goodsContainer.height() - 50){
if ($pre !== undefined) {
search();
search();
}
}
}
... ... @@ -359,169 +524,6 @@ $listNav.on('touchstart', 'li', function(e) {
});
// lazyLoad($('img.lazy'));
//焦点效果
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
if ($('.multi-browse').find('li').size() > 1) {
multiSwiper = new Swiper('.multi-browse', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li',
watchSlidesVisibility: true
});
}
function tabChange(dom, index) {
var li = dom.eq(index),
sortSize = li.find('.iconfont').length;
dom.removeClass('active');
li.addClass('active');
dom.removeClass('color');
li.addClass('color');
}
//首页导航
$.jqtab = function(nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
var index = $(this).index(),
activeTab = $(this).attr('tab');
tabChange($(nav + ' li'), index);
tabChange($(posNav + ' li'), index);
$(main).hide();
$('#' + activeTab).fadeIn();
return false;
});
};
$.jqtab('#nav','#pos-nav','.main');
$(function(){
$('#wrapper').addClass('scroll-wrapper');
lazyLoad($('img.lazy'));
setTimeout(function(){
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
// lazyLoad($('img.lazy'), {
// container: $("#scroller")
// });
myScroll.on('scroll', function() {
var sTop = -this.y;
if (sTop < imgH) {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
} //滑动距离不到导航1
} else if (sTop < imgH + nav1H + main1oH) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
}//滑动距离不到导航2
if (sTop < imgH + main1H) {
if (!$nav1.hasClass('fixed-top')) {
$nav1.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (- scH) + 'px)'
});
}
} else if (sTop < imgH + nav1H + main1H) {
if (!$nav1.hasClass('absolute')) {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
$nav1.css({
transform: 'translate(0, ' + (imgH + main1H - sTop - scH) + 'px)'
});
}
} else {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if ($nav2.hasClass('hide')) {
$nav2.removeClass('hide');
}
if (sTop < imgH + nav1H + main1oH + nav2H + main2oH) {
if (!$nav2.hasClass('fixed-top')) {
$nav2.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (- scH) + 'px)'
});
}
} else {
if (!$nav2.hasClass('absolute')) {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
$nav2.css({
transform: 'translate(0, ' + (imgH + nav1H + main1oH + main2oH -sTop - scH) + 'px)'
});
}
}
$("#scroller").trigger('scroll');
});
}, 1000)
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
if (!isIphone) {
return;
}
})
//window onload 后重新refresh iscroll
$(window).load(function() {
myScroll && myScroll.refresh();
imgH = $('#nav-top').outerHeight();
nav1H = $('#nav').outerHeight();
main1H = $('#nav-main').height();
main1oH = $('#nav-main').outerHeight();
nav2H = $('#list-nav').outerHeight();
main2oH = $('#goods-container').outerHeight();
scH = $('#scroller').outerHeight();
});
//底部导航点击
function fotterClick(group) {
$(group + ' li').on('touchstart', function() {
... ...
... ... @@ -22,7 +22,7 @@
height: 100px;
}
.name {
.store-name {
color: #fff;
font-size: 28px;
position: absolute;
... ... @@ -136,7 +136,7 @@
overflow: hidden;
p {
font-size: 28px;
font-size: 30px;
}
}
... ... @@ -332,7 +332,7 @@
.search-area {
@extend .search-page;
margin-top: 85px;
padding-top: 85px;
}
.hide {
... ...
... ... @@ -20,7 +20,7 @@
<div class="branner-top">
<img src="{{branerImg}}">
<img class="logo" src="{{logoImg}}">
<p class="name">{{storeName}}</p>
<p class="store-name">{{storeName}}</p>
<div class="collect">
{{#if collect}}
<img src="{{alreadyCollect}}"></img>
... ... @@ -120,7 +120,7 @@
</li>
</ul>
<ul id="pos-list " class="list-nav clearfixnav hide discount-area">
<ul id="pos-list" class="nav hide">
<li class="new active">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
... ...