|
...
|
...
|
@@ -8,21 +8,169 @@ |
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
IScroll = require('yoho-iscroll');
|
|
|
|
|
|
|
|
iScroll = new IScroll($('.nav-list')[0], {
|
|
|
|
scrollX: true,
|
|
|
|
scrollY: false,
|
|
|
|
tap: true,
|
|
|
|
eventPassthrough: true,
|
|
|
|
preventDefault: true
|
|
|
|
});
|
|
|
|
iScroll.on('scrollStart', function () {
|
|
|
|
$('.nav-list').addClass('srolling');
|
|
|
|
});
|
|
|
|
iScroll.on('scrollEnd', function () {
|
|
|
|
if ($('.nav-list').hasClass('srolling')) {
|
|
|
|
$('.nav-list').removeClass('srolling')
|
|
|
|
iScroll.scrollTo(-200, 0, 400, IScroll.utils.ease.elastic);
|
|
|
|
}
|
|
|
|
var times = $('.nav-ul>li').length,
|
|
|
|
startX = 0,
|
|
|
|
timeWidth = 0,
|
|
|
|
focusTimeWidth = 0,
|
|
|
|
iScroll;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* [初始化时间段]
|
|
|
|
*/
|
|
|
|
function initNav() {
|
|
|
|
timeWidth = ($('.nav-ul>li:not(.focus)').width() + 1);
|
|
|
|
focusTimeWidth = ($('.nav-ul>li.focus').width() + 1);
|
|
|
|
|
|
|
|
$('.nav-ul').width((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 (iScroll) {
|
|
|
|
iScroll.destroy();
|
|
|
|
}
|
|
|
|
iScroll = new IScroll($('.nav-list')[0], {
|
|
|
|
scrollX: true,
|
|
|
|
scrollY: false,
|
|
|
|
startX: startX,
|
|
|
|
tap: true,
|
|
|
|
eventPassthrough: true,
|
|
|
|
preventDefault: true,
|
|
|
|
bounceTime: 400,
|
|
|
|
bounceEasing: {
|
|
|
|
style: 'cubic-bezier(0.333333, 0.666667, 0.666667, 1)'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
registerScrollEvents(iScroll);
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* [注册iscroll事件，滑动停止时判断位置自动选中居中时间段]
|
|
|
|
*/
|
|
|
|
function registerScrollEvents(iScroll) {
|
|
|
|
iScroll.on('scrollStart', function () {
|
|
|
|
$('.nav-list').addClass('srolling');
|
|
|
|
});
|
|
|
|
iScroll.on('scrollEnd', function () {
|
|
|
|
//避免死循环
|
|
|
|
if ($('.nav-list').hasClass('srolling')) {
|
|
|
|
$('.nav-list').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();
|
|
|
|
if (offsetLeft >= 0) { //判断选中时间段
|
|
|
|
selectTime($('.nav-ul>li').eq(i));
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* [选中时间段]
|
|
|
|
*/
|
|
|
|
function selectTime(el) {
|
|
|
|
$('.nav-ul>li').removeClass('focus');
|
|
|
|
var index = $(el).index();
|
|
|
|
|
|
|
|
$(el).addClass('focus');
|
|
|
|
//点击切换时遇到首尾特殊处理选中时间段位置,大于3个才需要滑动选中
|
|
|
|
if ($('.nav-ul>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);
|
|
|
|
} else {
|
|
|
|
iScroll.scrollTo((0 - (index-1)*timeWidth), 0, 400);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($(el).hasClass('now') || $(el).hasClass('wait')) {
|
|
|
|
//初始化倒计时并开始计时
|
|
|
|
initTick(el);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$('.nav-ul>li').click(function () {
|
|
|
|
selectTime(this);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* [刷新状态]
|
|
|
|
* @param {[type]} el [description]
|
|
|
|
* @return {[type]} [description]
|
|
|
|
*/
|
|
|
|
function refreshList(el) {
|
|
|
|
//刷新时间段状态
|
|
|
|
$('.nav-ul>li').each(function () {
|
|
|
|
$(this).removeClass('now over wait');
|
|
|
|
var time = new Date($(this).find('input.date').val());
|
|
|
|
var nowTime = new Date();
|
|
|
|
if (nowTime > time) { //当前时间大于这个时间段，已经开始和即将开始两种情况
|
|
|
|
if ($(this).next('.time-item').length) {
|
|
|
|
var nextTime = new Date($(this).next().find('input.date').val());
|
|
|
|
if (nowTime < nextTime) { //下一个时间段与当前时间来区别是否正在抢购
|
|
|
|
$(this).addClass('now');
|
|
|
|
} else {
|
|
|
|
$(this).addClass('over');
|
|
|
|
}
|
|
|
|
} else { //大于这个时间段但是后面没有秒抢时间端了，则依然显示抢购中
|
|
|
|
$(this).addClass('now');
|
|
|
|
}
|
|
|
|
} else if (!$(this).hasClass('nothing')) {
|
|
|
|
$(this).addClass('wait');
|
|
|
|
}
|
|
|
|
})
|
|
|
|
//刷新列表状态
|
|
|
|
console.log('刷新啊')
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* [初始化倒计时]
|
|
|
|
*/
|
|
|
|
var currentTick;
|
|
|
|
function initTick(el) {
|
|
|
|
if (currentTick) {
|
|
|
|
clearTimeout(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;
|
|
|
|
} else {
|
|
|
|
time = Date.parse(new Date($(el).find('input.date').val())) / 1000;
|
|
|
|
}
|
|
|
|
offsetTime = time - nowTime;
|
|
|
|
startTick(el, offsetTime);
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* [开始倒计时]
|
|
|
|
*/
|
|
|
|
function startTick(el, offsetTime) {
|
|
|
|
var hour = parseInt(offsetTime / (60 * 60), 10);
|
|
|
|
var minute = parseInt(offsetTime % (60 * 60) / 60, 10);
|
|
|
|
var second = offsetTime % 60;
|
|
|
|
$(el).find('.tick.hour').text(hour < 0 ? '00': (hour<10?('0'+hour):hour));
|
|
|
|
$(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);
|
|
|
|
} else {
|
|
|
|
setTimeout(function() {
|
|
|
|
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 |
...
|
...
|
|
