Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOBUYWAP
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
zhangxiaoru
9 years ago
Commit
1d0989c683bb5b444c36fcab608feb861ae1a803
1 parent
62b58e1f
首页
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
172 additions
and
52 deletions
static/js/product/shop.js
static/sass/product/_shop-index.css
template/m.yohobuy.com/actions/product/index/shop.phtml
template/m.yohobuy.com/partials/product/goods-nav-top.phtml
static/js/product/shop.js
View file @
1d0989c
...
...
@@ -24,7 +24,8 @@ var tip = require('../plugin/tip'),
filter
=
require
(
'../plugin/filter'
),
loading
=
require
(
'../plugin/loading'
);
var
$goodsContainer
=
$
(
'#goods-container'
),
var
$subNav
=
$
(
'.home-sub-nav'
),
$goodsContainer
=
$
(
'#goods-container'
),
$goodsChildren
=
$goodsContainer
.
children
(),
$ngc
=
$
(
$goodsChildren
.
get
(
0
)),
$pgc
=
$
(
$goodsChildren
.
get
(
1
)),
...
...
@@ -37,9 +38,22 @@ var winH = $(window).height(),
var
defaultOpt
=
require
(
'./query-param'
);
var
$listNav
=
$
(
'#list-nav'
),
$posList
=
$
(
'#pos-list'
),
//导航数据信息
navInfo
=
{
new
:
{
order
:
1
,
reload
:
true
,
page
:
0
,
end
:
false
},
hot
:
{
order
:
1
,
reload
:
true
,
page
:
0
,
end
:
false
},
newest
:
{
order
:
1
,
reload
:
true
,
...
...
@@ -60,6 +74,7 @@ var $listNav = $('#list-nav'),
}
},
$pre
=
$listNav
.
find
(
'.active'
),
//纪录进入筛选前的active项,初始为选中项
$lie
=
$posList
.
find
(
'.active'
),
searching
;
var
viewType
=
1
;
// 1-首页,2-上新,3-人气
...
...
@@ -105,8 +120,11 @@ function tabChange(dom, index) {
$
.
jqtab
=
function
(
nav
,
posNav
,
main
)
{
$
(
nav
+
' li, '
+
posNav
+
' li'
).
on
(
'touchstart'
,
function
()
{
var
index
=
$
(
this
).
index
(),
activeTab
=
$
(
this
).
attr
(
'tab'
);
$nav1
.
removeClass
(
'fixed-top'
);
tabChange
(
$
(
nav
+
' li'
),
index
);
tabChange
(
$
(
posNav
+
' li'
),
index
);
...
...
@@ -114,6 +132,12 @@ $.jqtab = function(nav, posNav, main) {
$
(
main
).
hide
();
$
(
'#'
+
activeTab
).
fadeIn
();
if
(
activeTab
==
'new-arrival'
){
newData
();
}
else
if
(
activeTab
==
'popularity'
){
hotData
();
}
return
false
;
});
};
...
...
@@ -140,8 +164,11 @@ function getPageGoods(info) {
data
:
info
.
data
,
success
:
function
(
data
)
{
info
.
callBack
(
data
);
myScroll
&&
myScroll
.
refresh
();
scH
=
$
(
'#scroller'
).
outerHeight
();
setTimeout
(
function
()
{
myScroll
.
refresh
();
scH
=
$
(
'#scroller'
).
outerHeight
();
},
1000
);
searching
=
false
;
},
error
:
function
()
{
...
...
@@ -151,22 +178,39 @@ function getPageGoods(info) {
});
}
function
home
Data
()
{
function
new
Data
()
{
var
req
=
{};
req
.
url
=
'/product/newsale/selectNewSale'
;
req
.
url
=
'/index/search/search'
;
req
.
data
=
{
type
:
'newest'
,
order
:
'1'
,
page
:
'1'
,
shop_id
:
'102'
};
req
.
callBack
=
function
(
data
)
{
$ngc
.
html
(
data
);
$
(
'#new-arrival'
).
append
(
data
);
navInfo
.
new
.
page
++
;
}
getPageGoods
(
req
);
}
function
newData
()
{
console
.
log
(
'newData'
);
}
function
hotData
()
{
console
.
log
(
'hotData'
);
var
req
=
{};
req
.
url
=
'/index/search/search'
;
req
.
data
=
{
type
:
'sales'
,
order
:
'1'
,
page
:
'1'
,
shop_id
:
'102'
};
req
.
callBack
=
function
(
data
)
{
$
(
'#popularity'
).
append
(
data
);
navInfo
.
hot
.
page
++
;
}
getPageGoods
(
req
);
}
myScroll
.
on
(
'scroll'
,
function
()
{
...
...
@@ -174,9 +218,7 @@ myScroll.on('scroll', function() {
if
(
sTop
+
winH
*
2
>
scH
)
{
switch
(
viewType
)
{
case
1
:
homeData
();
break
;
case
2
:
newData
();
break
;
...
...
@@ -185,6 +227,7 @@ myScroll.on('scroll', function() {
break
;
}
}
if
(
sTop
<
imgH
)
{
if
(
!
$nav1
.
hasClass
(
'hide'
))
{
$nav1
.
addClass
(
'hide'
);
...
...
@@ -234,16 +277,7 @@ myScroll.on('scroll', function() {
});
}
}
// 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'
);
});
...
...
@@ -270,7 +304,6 @@ $(window).load(function() {
main2oH
=
$
(
'#goods-container'
).
outerHeight
();
setTimeout
(
function
(){
scH
=
$
(
'#scroller'
).
outerHeight
();
console
.
log
(
scH
)
},
2000
);
});
...
...
@@ -282,7 +315,6 @@ function search(opt) {
nav
,
navType
,
page
;
return
;
if
(
searching
)
{
return
;
}
...
...
@@ -296,11 +328,12 @@ return;
}
}
//处理active状态
$listNav
.
children
(
'.active'
).
removeClass
(
'active'
);
$pre
.
addClass
(
'active'
);
switch
(
opt
.
type
)
{
case
'shop_id'
:
ext
=
{
shop_id
:
opt
.
id
};
break
;
case
'gender'
:
ext
=
{
gender
:
opt
.
id
...
...
@@ -373,7 +406,7 @@ return;
$
.
ajax
({
type
:
'GET'
,
url
:
'/product/newsale/selectNewSale
'
,
url
:
opt
.
url
?
opt
.
url
:
'
'
,
data
:
setting
,
success
:
function
(
data
)
{
var
$container
,
...
...
@@ -418,16 +451,17 @@ return;
window
.
rePosFooter
();
scH
=
$
(
'#scroller'
).
outerHeight
();
console
.
log
(
scH
)
},
setTimeout
(
function
()
{
myScroll
.
refresh
();
scH
=
$
(
'#scroller'
).
outerHeight
();
},
1000
);
},
error
:
function
()
{
tip
.
show
(
'网络断开连接了~'
);
searching
=
false
;
loading
.
hideLoadingMask
();
}
});
}
$
.
ajax
({
...
...
@@ -437,6 +471,13 @@ $.ajax({
success
:
function
(
data
)
{
$goodsContainer
.
append
(
data
);
setTimeout
(
function
()
{
myScroll
.
refresh
();
scH
=
$
(
'#scroller'
).
outerHeight
();
},
1000
);
//初始化filter&注册filter回调
filter
.
initFilter
({
fCbFn
:
search
,
...
...
@@ -455,8 +496,13 @@ $listNav.bind('contextmenu', function(e) {
return
false
;
});
$listNav
.
on
(
'touchend touchcancel'
,
function
(
e
)
{
$posList
.
bind
(
'contextmenu'
,
function
(
e
)
{
return
false
;
});
$subNav
.
on
(
'touchend touchcancel'
,
function
(
e
)
{
var
$this
=
$
(
e
.
target
).
closest
(
'li'
),
cname
,
nav
,
navType
,
$active
;
...
...
@@ -485,12 +531,14 @@ $listNav.on('touchend touchcancel', function(e) {
filter
.
showFilter
();
}
}
else
{
if
(
$this
.
hasClass
(
'new'
))
{
cname
=
'.new'
;
navType
=
'newest'
;
}
else
if
(
$this
.
hasClass
(
'price'
))
{
cname
=
'.price'
;
navType
=
'price'
;
}
else
if
(
$this
.
hasClass
(
'discount'
))
{
cname
=
'.discount'
;
navType
=
'discount'
;
}
...
...
@@ -504,6 +552,7 @@ $listNav.on('touchend touchcancel', function(e) {
}
if
(
$this
.
hasClass
(
'price'
)
||
$this
.
hasClass
(
'discount'
))
{
$this
=
$subNav
.
find
(
cname
);
// 价格/折扣切换排序状态
$this
.
find
(
'.icon > .iconfont'
).
toggleClass
(
'cur'
);
...
...
@@ -512,7 +561,7 @@ $listNav.on('touchend touchcancel', function(e) {
nav
.
order
=
nav
.
order
===
0
?
1
:
0
;
//切换排序
}
}
else
{
$active
=
$
this
.
siblings
(
'.active'
);
$active
=
$
subNav
.
find
(
'.active'
);
$pre
=
$this
;
//$pre为除筛选导航的其他导航项,若当前active的为筛选,则把$pre置为当前点击项
...
...
@@ -540,25 +589,36 @@ $listNav.on('touchend touchcancel', function(e) {
}
}
$active
.
removeClass
(
'active'
);
$this
.
addClass
(
'active'
);
$subNav
.
children
().
removeClass
(
'active'
);
$subNav
.
find
(
cname
).
addClass
(
'active'
);
}
if
(
nav
.
reload
)
{
search
();
search
({
type
:
'shop_id'
,
id
:
'111'
,
url
:
'/index/search/search'
});
}
}
e
.
stopPropagation
();
});
function
scrollHandler
()
{
//当scroll到1/4$goodsContainer高度后继续请求下一页数据
myScroll
&&
myScroll
.
refresh
();
if
(
sTop
+
winH
>
$
(
'#scroller'
).
height
()
-
0.25
*
$goodsContainer
.
height
()
-
50
){
if
(
sTop
+
winH
>
$
(
'#scroller'
).
height
()
-
0.25
*
$goodsContainer
.
height
()
-
50
){
if
(
$pre
!==
undefined
)
{
search
();
search
({
type
:
'shop_id'
,
id
:
'1111'
,
url
:
'/index/search/search'
});
}
}
}
...
...
@@ -569,7 +629,12 @@ $(window).scroll(function() {
});
//初始请求最新第一页数据
search
();
search
({
type
:
'shop_id'
,
id
:
'1111'
,
url
:
'/index/search/search'
}
);
$listNav
.
on
(
'touchstart'
,
'li'
,
function
(
e
)
{
$
(
this
).
addClass
(
'bytouch'
);
...
...
@@ -577,6 +642,13 @@ $listNav.on('touchstart', 'li', function(e) {
$listNav
.
find
(
'li'
).
removeClass
(
'bytouch'
);
});
$posList
.
on
(
'touchstart'
,
'li'
,
function
(
e
)
{
$
(
this
).
addClass
(
'bytouch'
);
}).
on
(
'touchend touchcancel'
,
function
()
{
$posList
.
find
(
'li'
).
removeClass
(
'bytouch'
);
});
//底部导航点击
function
fotterClick
(
group
)
{
...
...
@@ -604,4 +676,3 @@ $(document).bind('touchstart',function(){
$
(
'.shop-foot-wrapper'
).
bind
(
'touchstart'
,
function
(
e
){
stopPropagation
(
e
);
});
...
...
static/sass/product/_shop-index.css
View file @
1d0989c
...
...
@@ -411,4 +411,53 @@
background
:
#eee
;
}
.new-arrival
{
padding-top
:
30px
;
overflow
:
hidden
;
padding-left
:
15px
;
}
.popularity
{
padding-top
:
30px
;
overflow
:
hidden
;
padding-left
:
15px
;
}
.pos-list
{
@extend
.discount-page;
li
{
display
:
block
;
height
:
28px
;
float
:
left
;
line-height
:
28px
;
width
:
24%
;
text-align
:
center
;
border-left
:
1px
solid
#e1e1e1
;
margin-top
:
30px
;
margin-bottom
:
30px
;
border-sizing
:
border-box
;
span
{
font-size
:
28px
;
}
&
:first-child
{
border-left
:
none
;
}
}
.active
.cur
{
color
:
#000
;
}
.active
a
{
color
:
#000
;
}
.iconfont
{
font-weight
:
bold
;
}
}
}
\ No newline at end of file
...
...
template/m.yohobuy.com/actions/product/index/shop.phtml
View file @
1d0989c
...
...
@@ -104,20 +104,20 @@
{
{>
product/goods-nav-top
}
}
</div>
</div>
<div
id=
"new-arrival"
class=
""
></div>
<div
id=
"popularity"
class=
""
></div>
<div
id=
"new-arrival"
class=
"new-arrival"
></div>
<div
id=
"popularity"
class=
"popularity"
></div>
</div>
{
{>
product/shop-footer
}
}
<ul
id=
"pos-nav"
class=
"nav hide"
>
<li
class=
"active color"
>首页</li>
<li>上新</li>
<li>人气</li>
<li
class=
"active color homeData"
>首页</li>
<li
class=
"newData"
>上新</li>
<li
class='hotData'>人气</li>
<li>
<a
href=
"#"
target=
"_blank"
>全部商品</a>
</li>
</ul>
<ul
id=
"pos-list"
class=
"nav hide"
>
<ul
id=
"pos-list"
class=
"
home-sub-nav pos-list
nav hide"
>
<li
class=
"new active"
>
<a
href=
"javascript:void(0);"
>
<span
class=
"spanTest"
>最新</span>
...
...
template/m.yohobuy.com/partials/product/goods-nav-top.phtml
View file @
1d0989c
<ul id="list-nav" class="list-nav clearfix">
<ul id="list-nav" class="
home-sub-nav
list-nav clearfix">
<li class="new active">
<a href="javascript:void(0);">
<span class="spanTest">最新</span>
...
...
Please
register
or
login
to post a comment