Authored by 王洪广

update nav

{{# nav}}
<nav class="outlet-nav">
<nav class="outlet-nav" id="index_nav">
<ul>
{{#each data}}
<li><a href="{{url}}">{{name}}</a></li>
{{/each}}
<li><a href="outlet/willBeEnd">即将结束</a></li>
<li><a href="outlet/willBeCome">上线预告</a></li>
</ul>
</nav>
{{/nav}}
... ...
... ... @@ -2,7 +2,7 @@ var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
lazyLoad = require('yoho-jquery-lazyload');
// var nav = require('./outlet/nav');
var iscroll = require('./outlet/nav');
require('./sale/search');
... ... @@ -65,3 +65,12 @@ if (('.outlet-page').length > 0) {
}
// 导航滚动
iscroll({
el: '#index_nav'
}).goto($('#index_nav').find('.active').index());
iscroll({
el: '#list-nav'
}).goto(0);
\ No newline at end of file
... ...
var $ = require('yoho-jquery'),
IScroll = require('yoho-iscroll');
var defaultOpt = {
navClass: '.outlet-nav'
};
// nav 滚动
function initNavScroll(opt) {
var $navBox,
iScroll,
_default = {
el: '.outlet-nav'
},
options;
// $lis,
iScroll;
options = $.extend({}, _default, opt);
$navBox = $(options.el);
$.extend(opt || {}, defaultOpt);
function scroll(index) {
var $ele;
$navBox = $(opt.navClass);
$ele = $navBox.find('li').eq(index);
if ($ele.length > 0) {
setTimeout(function() {
iScroll.scrollToElement($ele[0], 400);
}, 1);
}
}
// $lis = $navBox.find('li');
iScroll = new IScroll($navBox[0], {
scrollX: true,
scrollY: false
});
function scroll(ele) {
var offset;
return {
goto: scroll
};
}
ele = ele || $navBox.find('li').eq(0)[0];
offset = -($navBox.find('ul').width() - 20) / 2;
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
setTimeout(function() {
iScroll.scrollToElement(ele, 400, offset);
}, 1);
//返回参数值
if (r !== null) {
return decodeURIComponent(r[2]);
} else {
return null;
}
}
$.each($navBox, function(index) {
iScroll = new IScroll($navBox[index], {
scrollX: true,
scrollY: false
});
});
//选中顶部导航
function activeNav() {
var $nav = $('#index_nav');
var index = getUrlParam('yh_channel');
// $navBox.on('click', 'li', function() {
// var $this = $(this); // eslint-disable-line
// var i = $this.index();
if (index === null) {
index = 0;
}
$nav.find('li').eq(index).addClass('active').siblings().removeClass('active');
}
// $lis.eq(i).addClass('active').siblings().removeClass('active');
// scroll($this[0]);
// });
scroll($navBox.find('.active')[0]);
}
activeNav();
module.exports = initNavScroll;
... ...