fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 5c27c42f8fb2828ff60daa9286236ba185998bee 1 parent 1e45099b

改造秒杀列表页脚本结构，参考activity/invite

Inline Side-by-side
Showing 6 changed files with 112 additions and 84 deletions
... ... @@ -52,20 +52,20 @@ const _index = (req, res, next) => {
time: '12:00',
over: true
}, {
day: '2016/09/09',
time: '17:25',
day: '2016/09/12',
time: '10:40',
now: true
}, {
day: '2016/09/09',
time: '17:26',
day: '2016/09/12',
time: '10:50',
wait: true
}, {
day: '2016/09/09',
time: '17:27',
day: '2016/09/12',
time: '11:00',
wait: true
}, {
day: '2016/09/09',
time: '17:28',
day: '2016/09/12',
time: '11:10',
last: true,
wait: true
}]
... ...
<div class="seckill-list">
{{> seckill/nav}}
<div class="tips">您只有在详情页使用立即购买，才能享受秒杀价</div>
<section class="tips">您只有在详情页使用立即购买，才能享受秒杀价</section>
<div class="product-list">
{{# products}}
{{> seckill/product}}
... ...
... ... @@ -14,7 +14,7 @@
<div class="item-foot">
{{# if wait}}
<div class="item-time"><span><i class="iconfont">&#xe603;</i>8月31日 19:00开始</span></div>
<div class="item-time"><span><i class="iconfont">&#xe603;</i><time>8月31日 19:00</time>开始</span></div>
{{else}}
<div class="item-price">
<ins>¥99</ins><del>¥234</del>
... ...
... ... @@ -3,36 +3,66 @@
* author: 陈峰<feng.chen@yoho.cn>
* date: 2016/09/08
*/
var $ = require('yoho-jquery'),
IScroll = require('yoho-iscroll'),
seckillObj = {};
(function(){
var $ = require('yoho-jquery'),
IScroll = require('yoho-iscroll');
seckillObj = {
el: {
//doms
$navUl: $('.nav-ul'),
$navList: $('.nav-list'),
var times = $('.nav-ul>li').length,
startX = 0,
timeWidth = 0,
focusTimeWidth = 0,
iScroll;
//变量
times: $('.nav-ul>li').length,
startX: 0,
timeWidth: 0,
focusTimeWidth: 0,
iScroll: null,
currentTick: null
},
/**
* [初始化界面]
*/
init: function() {
var $el = this.el, that = this;
$el.$navUl.find('>li').click(function () {
that.selectTime(this);
});
$(window).resize(function() {
that.initNav();
})
that.initNav();
var focus = $el.$navUl.find('>li.focus');
if (focus.length && (focus.hasClass('now') || focus.hasClass('wait'))) {
that.initTick($('.nav-ul>li.focus'));
}
},
/**
* [初始化时间段]
*/
function initNav() {
timeWidth = ($('.nav-ul>li:not(.focus)').width() + 1);
focusTimeWidth = ($('.nav-ul>li.focus').width() + 1);
initNav: function() {
var $el = this.el, that = this;
timeWidth = ($el.$navUl.find('>li:not(.focus)').width() + 1);
focusTimeWidth = ($el.$navUl.find('>li.focus').width() + 1);
$('.nav-ul').width((times - 1) * timeWidth + focusTimeWidth).removeClass('hide');
$el.$navUl.width(($el.times - 1) * timeWidth + focusTimeWidth).removeClass('hide');
//只有时间段大于3个才需要定位
if ($('.nav-ul>li').length > 3 && $('.nav-ul>li.focus').length) {
startX = (0 - ($('.nav-ul>li.focus').index()-1)*timeWidth);
if ($el.$navUl.find('>li').length > 3 && $el.$navUl.find('>li.focus').length) {
$el.startX = (0 - ($el.$navUl.find('>li.focus').index()-1)*timeWidth);
}
if (iScroll) {
iScroll.destroy();
if ($el.iScroll) {
$el.iScroll.destroy();
}
iScroll = new IScroll($('.nav-list')[0], {
$el.iScroll = new IScroll($el.$navList[0], {
scrollX: true,
scrollY: false,
startX: startX,
startX: $el.startX,
tap: true,
eventPassthrough: true,
preventDefault: true,
... ... @@ -41,67 +71,66 @@
style: 'cubic-bezier(0.333333, 0.666667, 0.666667, 1)'
}
});
registerScrollEvents(iScroll);
}
that.registerScrollEvents($el.iScroll);
},
/**
* [注册iscroll事件，滑动停止时判断位置自动选中居中时间段]
*/
function registerScrollEvents(iScroll) {
registerScrollEvents: function(iScroll) {
var $el = this.el, that = this;
iScroll.on('scrollStart', function () {
$('.nav-list').addClass('srolling');
$el.$navList.addClass('srolling');
});
iScroll.on('scrollEnd', function () {
//避免死循环
if ($('.nav-list').hasClass('srolling')) {
$('.nav-list').removeClass('srolling');
if ($el.$navList.hasClass('srolling')) {
$el.$navList.removeClass('srolling');
var offsetLeft = this.x - $(window).width()/2;
for (var i = 0; i < $('.nav-ul>li').length; i++) {
offsetLeft += $('.nav-ul>li').eq(i).width();
for (var i = 0; i < $el.$navUl.find('>li').length; i++) {
offsetLeft += $el.$navUl.find('>li').eq(i).width();
if (offsetLeft >= 0) { //判断选中时间段
selectTime($('.nav-ul>li').eq(i));
that.selectTime($el.$navUl.find('>li').eq(i));
break;
}
}
}
});
}
},
/**
* [选中时间段]
*/
function selectTime(el) {
$('.nav-ul>li').removeClass('focus');
var index = $(el).index();
selectTime: function(elem) {
var $el = this.el, that = this;
$(el).addClass('focus');
$el.$navUl.find('>li').removeClass('focus');
var index = $(elem).index();
$(elem).addClass('focus');
//点击切换时遇到首尾特殊处理选中时间段位置,大于3个才需要滑动选中
if ($('.nav-ul>li').length > 3) {
if ($el.$navUl.find('>li').length > 3) {
if (index === 0) {
iScroll.scrollTo(0, 0, 400);
} else if (index === $('.nav-ul>li').length - 1) {
iScroll.scrollTo(0 - $('.nav-ul').width() + timeWidth * 2 + focusTimeWidth, 0, 400);
$el.iScroll.scrollTo(0, 0, 400);
} else if (index === $el.$navUl.find('>li').length - 1) {
$el.iScroll.scrollTo(0 - $el.$navUl.width() + timeWidth * 2 + focusTimeWidth, 0, 400);
} else {
iScroll.scrollTo((0 - (index-1)*timeWidth), 0, 400);
$el.iScroll.scrollTo((0 - (index-1)*timeWidth), 0, 400);
}
}
if ($(el).hasClass('now') || $(el).hasClass('wait')) {
if ($(elem).hasClass('now') || $(elem).hasClass('wait')) {
//初始化倒计时并开始计时
initTick(el);
that.initTick(elem);
}
}
$('.nav-ul>li').click(function () {
selectTime(this);
});
},
/**
* [刷新状态]
* @param {[type]} el [description]
* @return {[type]} [description]
*/
function refreshList(el) {
refreshList: function(el) {
var $el = this.el, that = this;
//刷新时间段状态
$('.nav-ul>li').each(function () {
$el.$navUl.find('>li').each(function () {
$(this).removeClass('now over wait');
var time = new Date($(this).find('input.date').val());
var nowTime = new Date();
... ... @@ -122,31 +151,34 @@
})
//刷新列表状态
console.log('刷新啊')
}
},
/**
* [初始化倒计时]
*/
var currentTick;
function initTick(el) {
if (currentTick) {
clearTimeout(currentTick);
initTick: function(elem) {
var $el = this.el, that = this;
if ($el.currentTick) {
clearTimeout($el.currentTick);
}
var time;
var nowTime = Date.parse(new Date()) / 1000;
var offsetTime;
if ($(el).hasClass('now')) {
time = Date.parse(new Date($(el).next().find('input.date').val())) / 1000;
if ($(elem).hasClass('now')) {
time = Date.parse(new Date($(elem).next().find('input.date').val())) / 1000;
} else {
time = Date.parse(new Date($(el).find('input.date').val())) / 1000;
time = Date.parse(new Date($(elem).find('input.date').val())) / 1000;
}
offsetTime = time - nowTime;
startTick(el, offsetTime);
}
that.startTick(elem, offsetTime);
},
/**
* [开始倒计时]
*/
function startTick(el, offsetTime) {
startTick: function(el, offsetTime) {
var $el = this.el, that = this;
var hour = parseInt(offsetTime / (60 * 60), 10);
var minute = parseInt(offsetTime % (60 * 60) / 60, 10);
var second = offsetTime % 60;
... ... @@ -154,23 +186,13 @@
$(el).find('.tick.minute').text(minute < 0 ? '00': (minute<10?('0'+minute):minute));
$(el).find('.tick.second').text(second < 0 ? '00': (second<10?('0'+second):second));
if (offsetTime <= 0) { //结束倒计时刷新状态
refreshList(el);
that.refreshList(el);
} else {
setTimeout(function() {
startTick(el, --offsetTime);
that.startTick(el, --offsetTime);
}, 1000);
}
}
}
$(window).resize(function() {
initNav();
})
initNav();
var focus = $('.nav-ul>li.focus');
if (focus.length && (focus.hasClass('now') || focus.hasClass('wait'))) {
initTick($('.nav-ul>li.focus'));
}
}())
\ No newline at end of file
seckillObj.init();
\ No newline at end of file
... ...
... ... @@ -6,6 +6,7 @@
border-top: solid 1PX #e1e1e1;
border-bottom: solid 1PX #e1e1e1;
height: 119px;
overflow: hidden;
ul {
width: auto;
overflow: hidden;
... ...
... ... @@ -87,6 +87,11 @@
}
}
.old-price {
display: block;
width: 100%;
position: absolute;
top: -35px;
right: 0px;
font-size: 20px;
color: #d0021b;
line-height: 30px;
... ...