fe / yohobuywap-node · Commits

Go to a project

Authored by 徐炜
Commit 09df01d6e7bdc60a1e8159740f8e953326659af0 1 parent 2a4949a7

逛详情优化

Inline Side-by-side
Showing 2 changed files with 145 additions and 151 deletions
var lazyLoad = require('yoho-jquery-lazyload');
/**
* 搭配区块
*
* @constructor
*/
function CollocationBlock() {
this.elem = $('.collocation-block');
this.container = this.elem.children('.thumb-container');
this.elem.find('.prod');
this.prods = this.elem.find('.prod');
//this.fixedContainer = $('#wrapper')
// .after(this.container.clone().addClass('fixed-thumb-container fixed-bottom'))
// .next('.thumb-container');
//lazyLoad(this.fixedContainer.find('.lazy'));
this.container.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
// this.fixedContainer.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
this.thumbs = this.container.find('li');
// this.fixedThumbs = this.fixedContainer.find('li');
// 初始化箭头位置
this._updateCollocationArrowPos(this.thumbs.filter('.focus'));
var scrollFn = () => {
var pos = this.container.offset(),
posFixed = this.fixedContainer.offset();
var visible = false;
if (posFixed.top >= pos.top) {
visible = false;
} else {
visible = true;
}
if (posFixed.top + this.fixedContainer.height() > $('ul.brand-list').offset().top) {
visible = false;
} else if (pos.top < $(window).scrollTop()) {
visible = true;
this.fixedContainer.removeClass('fixed-bottom').addClass('fixed-top');
} else {
this.fixedContainer.removeClass('fixed-top').addClass('fixed-bottom');
}
this.fixedContainer.css({
visibility: visible ? 'visible' : 'hidden'
});
};
//$(document).on('scroll', scrollFn);
//$(document).on('touchmove', scrollFn);
}
CollocationBlock.exists = function() {
return $('.collocation-block').size() > 0;
};
$.extend(CollocationBlock.prototype, {
/**
* 计算搭配的箭头的位置
* @param current 当前focus的搭配项
*/
_updateCollocationArrowPos: function(current) {
var left = current.offset().left,
bgPos = -$(window).width() + left + (this.thumbs.width() / 2) + 'px';
this.container.css({
backgroundPosition: bgPos + ' bottom'
});
/*
this.fixedContainer.css({
backgroundPosition: bgPos + ' bottom'
});
*/
},
/**
* 搭配thumb的touch事件句柄
*
* @param e
* @private
*/
_touchHandler: function(e) {
var current = $(e.currentTarget),
index = current.index();
if (current.hasClass('focus')) {
return;
}
this.thumbs.removeClass('focus');
// this.fixedThumbs.removeClass('focus');
current.addClass('focus');
// 更新箭头位置
this._updateCollocationArrowPos(current);
this.prods.not('.hide').addClass('hide');
this.curProds = this.prods.eq(index);
this.curProds.removeClass('hide');
$('body').animate({
scrollTop: this.elem.offset().top
}, 400);
}
});
module.exports = CollocationBlock;
... ...
... ... @@ -3,119 +3,44 @@
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/13
*/
require("guang/info-index.page.css")
require('guang/info-index.page.css');
var $ = require('yoho-jquery'),
ellipsis = require('yoho-mlellipsis'),
lazyLoad = require('yoho-jquery-lazyload');
//IScroll = require('yoho-iscroll/build/iscroll-probe');
var $authorIntro = $('.author .intro');
var pageInIscroll = false;
var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;
// collocation block variable
var thumbWidth = 0,
$fixedThumbContainer = $(''),
$coBlock, $thumbContainer, $thumbs, $prods,
scrollToEl,
myScroll,
winW = $(window).width();
scrollToEl = document.querySelector('#wrapper .collocation-block');
var $fixedThumbContainer = $(''),
$coBlock,
$thumbContainer = $('.thumb-container');
require('../common');
require('../plugin/wx-share')();
require('./detail-dynamic');
var CollactionBlock = require('./collocation-block');
$('#wrapper').css({
'overflow-y': 'scroll'
});
/**
* 计算搭配的箭头的位置
* @param $curPos 当前focus的搭配项
*/
function posCollocationArrow($curCo) {
var left = $curCo.offset().left,
bgPos = -winW + left + (thumbWidth / 2) + 'px';
$thumbContainer.css({
backgroundPosition: bgPos + ' bottom'
});
if (pageInIscroll) {
$fixedThumbContainer.css({
backgroundPosition: bgPos + ' bottom'
});
}
}
// 搭配thumb的touch事件句柄
function thumbTouchEvt(e) {
var $curCo = $(e.currentTarget),
index = $curCo.index(),
$brother, $brotherCo,
$curProds;
if ($curCo.hasClass('focus')) {
return;
}
$thumbs.filter('.focus').removeClass('focus');
if (pageInIscroll) {
if ($curCo.closest('.fixed-thumb-container').length > 0) {
$brother = $thumbContainer;
} else {
$brother = $fixedThumbContainer;
}
$brotherCo = $brother.find('.thumb').eq(index);
$fixedThumbContainer.find('.thumb.focus').removeClass('focus');
$brotherCo.addClass('focus');
}
$curCo.addClass('focus');
// 定位arrow
posCollocationArrow($curCo);
$prods.not('.hide').addClass('hide');
$curProds = $prods.eq(index);
$curProds.removeClass('hide');
//
lazyLoad($curProds.find('.lazy'));
if (pageInIscroll) {
if (myScroll) {
myScroll.scrollToElement(scrollToEl, 400);
}
} else {
$('body').animate({
scrollTop: $coBlock.offset().top
}, 400);
}
myScroll && myScroll.refresh();
}
// 初始化iscroll
function initIscroll() {
var $scroller = $('#scroller'),
$yohoHeader = $('.yoho-header');
var $yohoHeader = $('.yoho-header');
var hH = 0,
winH, tcH, cbH, cbTop, fixedThumbDom;
if (CollactionBlock.exists()) {
new CollactionBlock();
}
// 考虑通用头部的影响：对offset().top以及winH做对应偏移
if ($yohoHeader.length > 0) {
hH = $yohoHeader.outerHeight();
}
/*
myScroll = new IScroll('#wrapper', {
probeType: 3,
... ... @@ -126,12 +51,12 @@ function initIscroll() {
e.preventDefault();
}, false);
if (!hasCollocationBlock) {
myScroll.on('scroll', function() {
$scroller.trigger('scroll');
});
return;
}
if (!hasCollocationBlock) {
myScroll.on('scroll', function() {
$scroller.trigger('scroll');
});
return;
}
*/
... ... @@ -139,14 +64,15 @@ function initIscroll() {
winH = $(window).height() - hH;
fixedThumbDom = $fixedThumbContainer[0];
tcH = $thumbContainer.outerHeight();
cbH = $coBlock.outerHeight();
cbTop = $coBlock.offset().top - hH;
tcH = $thumbContainer ? $thumbContainer.outerHeight() : 0;
if ($coBlock) {
cbH = $coBlock.outerHeight();
cbTop = $coBlock.offset().top - hH;
}
$(window).on('scroll', function() {
console.log(1);
var sTop = -this.y;
var classList = fixedThumbDom.className;
var classList = fixedThumbDom && fixedThumbDom.className;
if (sTop <= cbTop - winH + tcH) {
if (classList.indexOf('fixed-bottom') === -1) {
... ... @@ -181,7 +107,6 @@ function initIscroll() {
.removeClass('absolute');
}
}
//$scroller.trigger('scroll');
});
}
... ... @@ -200,8 +125,6 @@ function initIscroll() {
// 初始化页面,包括是否使用iscorll初始化页面
// 接口暴露在HTML中，使用压缩名
(function() {
var useIscroll;
var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;
var $this, $title;
// pagecache 前端判断是否显示头
... ... @@ -210,17 +133,10 @@ function initIscroll() {
isHeader && $('#yoho-header').remove();
if ($('.guang-detail-page').hasClass('guang-detail')) {
useIscroll = true;
} else if ($('.guang-detail-page').hasClass('guang-ezine')) {
useIscroll = false;
}
$('.main-wrap').css({
position: 'static'
});
pageInIscroll = isIphone && useIscroll;
ellipsis.init();
if ($('.good-detail-text .name').length > 0) {
... ... @@ -243,49 +159,7 @@ function initIscroll() {
parseInt($authorIntro.css('margin-left'), 10))) {
$authorIntro.css('padding-top', 0);
}
/*
if (pageInIscroll) {
if ($('.yoho-header').length > 0) {
$('#wrapper').addClass('ios has-head');
} else {
$('#wrapper').addClass('ios');
}
}
*/
// 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
if (hasCollocationBlock) {
$coBlock = $('.collocation-block');
$thumbContainer = $coBlock.children('.thumb-container');
$thumbs = $thumbContainer.find('li');
$prods = $coBlock.find('.prod');
thumbWidth = $thumbs.width();
if (pageInIscroll) {
$fixedThumbContainer = $('#wrapper')
.after($thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))
.next('.thumb-container');
// load img of fixed thumb container
lazyLoad($fixedThumbContainer.find('.lazy'), {
event: 'sporty'
});
}
// Init Arrow Position
posCollocationArrow($thumbs.filter('.focus'));
$thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
if (pageInIscroll) {
$fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
}
}
if (pageInIscroll) {
initIscroll();
}
initIscroll();
}());
... ...