Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-frontM
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
云深项目组
beyond-clouds-frontM
Commits
ddf36c88
Commit
ddf36c88
authored
Mar 16, 2020
by
高浩杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
nav滑动
parent
a3660203
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
84 additions
and
196 deletions
+84
-196
components/moblie/nav.vue
+13
-4
pages/answer/index.vue
+1
-5
pages/blog/index.vue
+2
-158
pages/news/index.vue
+2
-5
pages/personal-center/person.vue
+19
-19
pages/personal-center/person/fans.vue
+45
-0
pages/project/index.vue
+2
-5
No files found.
components/moblie/nav.vue
View file @
ddf36c88
...
@@ -19,13 +19,22 @@
...
@@ -19,13 +19,22 @@
:no-flex-shrink=
"true"
:no-flex-shrink=
"true"
:padding-v=
"[20,0,0,40]"
:padding-v=
"[20,0,0,40]"
v-for=
"(item, index) in navList"
v-for=
"(item, index) in navList"
:class=
"
{active:index === actived}"
:flex-v=
"['column','flex-start','center']"
:flex-v=
"['column','flex-start','center']"
:key=
"item.id"
:key=
"item.id"
>
>
<nuxt-link
style=
"color: #999;"
tap=
"span"
:to=
"
{path:path, query: {type:item.id}}" v-tap="() => toggle(item.id)">
{{
item
.
label
}}
</nuxt-link>
<nuxt-link
<yun-div
:width-v=
"16"
:height-v=
"4"
:border-r=
"[2,2,0,0]"
:margin-v=
"[16,0,0]"
style=
"color: #999;"
:bg-color-v=
"item.id === actived ? '#00AAE6' : '#fff'"
></yun-div>
:to=
"
{path:path, query: {type:item.id}}"
v-tap="() => toggle(item.id)">
{{
item
.
label
}}
</nuxt-link>
<yun-div
:width-v=
"16"
:height-v=
"4"
:border-r=
"[2,2,0,0]"
:margin-v=
"[16,0,0]"
:bg-color-v=
"item.id === actived ? '#00AAE6' : '#fff'"
>
</yun-div>
</yun-div>
</yun-div>
</yun-div>
</yun-div>
<yun-div
<yun-div
...
...
pages/answer/index.vue
View file @
ddf36c88
<
template
>
<
template
>
<yun-slider>
<yun-div>
<yun-div
slot=
"card"
>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
...
@@ -10,7 +7,6 @@
...
@@ -10,7 +7,6 @@
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
<answer-card></answer-card>
</yun-div>
</yun-div>
</yun-slider>
</
template
>
</
template
>
<
script
>
<
script
>
...
...
pages/blog/index.vue
View file @
ddf36c88
<
template
>
<
template
>
<yun-slider
<yun-div>
@
touchstart
.
native=
"touchStart($event)"
@
touchmove
.
native=
"touchMove($event)"
@
touchend
.
native=
"touchend($event)"
class=
"load-moudle"
>
<yun-div
slot=
"card"
>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
...
@@ -24,12 +16,10 @@
...
@@ -24,12 +16,10 @@
:height-v=
"104"
:height-v=
"104"
:show-ske=
"false"
:show-ske=
"false"
:font-style=
"[24,104,500,'#999','center']"
:font-style=
"[24,104,500,'#999','center']"
v-if=
"isLoading"
>
>
加载中
加载中
</yun-div>
</yun-div>
</yun-div>
</yun-div>
</yun-slider>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -82,19 +72,7 @@ export default {
...
@@ -82,19 +72,7 @@ export default {
label
:
'python'
,
label
:
'python'
,
id
:
'18'
id
:
'18'
}
}
],
]
top
:
0
,
pullUpState
:
0
,
// 1:上拉加载更多, 2:加载中……, 3:我是有底线的
isLoading
:
false
,
// 是否正在加载
pullUpInfo
:
{
moreText
:
'上拉加载更多'
,
loadingText
:
'数据加载中...'
,
noMoreText
:
'我是有底线的'
},
startX
:
0
,
startY
:
0
,
endX
:
0
,
endY
:
0
}
}
},
},
created
()
{
created
()
{
...
@@ -107,140 +85,6 @@ export default {
...
@@ -107,140 +85,6 @@ export default {
type
:
'all'
type
:
'all'
}
}
})
})
},
methods
:
{
/**
* 触摸开始,手指点击屏幕时
* @param {object} e Touch 对象包含的属性
*/
touchStart
(
e
)
{
this
.
startX
=
e
.
touches
[
0
].
pageX
this
.
startY
=
e
.
touches
[
0
].
pageY
},
/**
* 接触点改变,滑动时
* @param {object} e Touch 对象包含的属性
*/
touchMove
(
e
)
{
this
.
endX
=
e
.
changedTouches
[
0
].
pageX
this
.
endY
=
e
.
changedTouches
[
0
].
pageY
let
direction
=
this
.
getSlideDirection
(
this
.
startX
,
this
.
startY
,
this
.
endX
,
this
.
endY
)
switch
(
direction
)
{
case
0
:
console
.
log
(
'没滑动'
)
break
case
1
:
console
.
log
(
'向上'
)
this
.
scrollToTheEnd
()
break
case
2
:
console
.
log
(
'向下'
)
break
case
3
:
console
.
log
(
'向左'
)
break
case
4
:
console
.
log
(
'向右'
)
break
default
:
}
},
/**
* 触摸结束,手指离开屏幕时
* @param {object} e Touch 对象包含的属性
*/
touchend
(
e
)
{
this
.
isLoading
=
false
},
/**
* 判断滚动条是否到底
*/
scrollToTheEnd
()
{
let
innerHeight
=
document
.
querySelector
(
'.load-moudle'
).
clientHeight
// 变量scrollTop是滚动条滚动时,距离顶部的距离
let
scrollTop
=
document
.
documentElement
.
scrollTop
||
window
.
pageYOffset
||
document
.
body
.
scrollTop
// 变量scrollHeight是滚动条的总高度
let
scrollHeight
=
document
.
documentElement
.
clientHeight
||
document
.
body
.
scrollHeight
// 滚动条到底部的条件
if
(
scrollTop
+
scrollHeight
>=
innerHeight
)
{
if
(
this
.
pullUpState
!==
3
&&
!
this
.
isLoading
)
{
this
.
infiniteLoad
()
}
// console.log('距顶部' + scrollTop + '滚动条总高度' + scrollHeight + '内容高度' + innerHeight)
}
},
/**
* 上拉加载数据
*/
infiniteLoad
()
{
if
(
this
.
pullUpState
!==
3
)
{
this
.
pullUpState
=
2
this
.
isLoading
=
true
this
.
onInfiniteLoad
()
}
},
/**
* 加载数据
*/
onInfiniteLoad
()
{
console
.
log
(
222
);
},
/**
* 加载数据完成
*/
infiniteLoadDone
()
{
this
.
pullUpState
=
1
},
/**
* 返回角度
*/
getSlideAngle
(
dx
,
dy
)
{
return
Math
.
atan2
(
dy
,
dx
)
*
180
/
Math
.
PI
},
/**
* 根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
* @param {number} startX X轴开始位置
* @param {number} startY X轴结束位置
* @param {number} endX Y轴开始位置
* @param {number} endY Y轴结束位置
*/
getSlideDirection
(
startX
,
startY
,
endX
,
endY
)
{
let
dy
=
startY
-
endY
let
dx
=
endX
-
startX
let
result
=
0
// 如果滑动距离太短
if
(
Math
.
abs
(
dx
)
<
2
&&
Math
.
abs
(
dy
)
<
2
)
{
return
result
}
let
angle
=
this
.
getSlideAngle
(
dx
,
dy
)
if
(
angle
>=
-
45
&&
angle
<
45
)
{
result
=
4
}
else
if
(
angle
>=
45
&&
angle
<
135
)
{
result
=
1
}
else
if
(
angle
>=
-
135
&&
angle
<
-
45
)
{
result
=
2
}
else
if
((
angle
>=
135
&&
angle
<=
180
)
||
(
angle
>=
-
180
&&
angle
<
-
135
))
{
result
=
3
}
return
result
}
},
watch
:
{
parentPullUpState
(
curVal
,
oldVal
)
{
this
.
pullUpState
=
curVal
}
}
}
}
}
</
script
>
</
script
>
...
...
pages/news/index.vue
View file @
ddf36c88
<
template
>
<
template
>
<yun-slider>
<yun-div>
<yun-div
slot=
"card"
>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
...
@@ -15,12 +12,12 @@
...
@@ -15,12 +12,12 @@
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</yun-div>
</yun-div>
</yun-slider>
</
template
>
</
template
>
<
script
>
<
script
>
import
Nav
from
"../../components/moblie/nav"
;
import
Nav
from
"../../components/moblie/nav"
;
import
ProjectCard
from
"../../components/moblie/projectCard"
;
import
ProjectCard
from
"../../components/moblie/projectCard"
;
export
default
{
export
default
{
components
:
{
ProjectCard
,
Nav
},
components
:
{
ProjectCard
,
Nav
},
data
()
{
data
()
{
...
...
pages/personal-center/person.vue
View file @
ddf36c88
...
@@ -4,26 +4,26 @@
...
@@ -4,26 +4,26 @@
>
>
<nav-bar
:path=
"path"
:nav-list=
"navList"
></nav-bar>
<nav-bar
:path=
"path"
:nav-list=
"navList"
></nav-bar>
<nuxt-child></nuxt-child>
<nuxt-child></nuxt-child>
<yun-dialog
<!--
<yun-dialog-->
title=
"添加备注"
<!-- title="添加备注"-->
:value=
"true"
<!-- :value="true"-->
:btns=
"slotDialog.btns"
<!-- :btns="slotDialog.btns"-->
>
<!-- >--
>
<yun-div
<!--
<yun-div-->
:width-v=
"464"
<!-- :width-v="464"-->
:margin-v=
"[0,'auto']"
<!-- :margin-v="[0,'auto']"-->
slot=
"header"
>
<!-- slot="header">--
>
<yun-input
<!--
<yun-input-->
:width-v=
"464"
<!-- :width-v="464"-->
:height-v=
"72"
<!-- :height-v="72"-->
:border-v=
"[6]"
<!-- :border-v="[6]"-->
placeholder=
"请输入备注的内容"
<!-- placeholder="请输入备注的内容"-->
:show-icon=
"false"
<!-- :show-icon="false"-->
>
<!-- >--
>
</yun-input
>
<!--
</yun-input>
--
>
</yun-div
>
<!--
</yun-div>
--
>
</yun-dialog
>
<!--
</yun-dialog>
--
>
</yun-div>
</yun-div>
</
template
>
</
template
>
...
...
pages/personal-center/person/fans.vue
View file @
ddf36c88
<
template
>
<yun-div>
<Nav></Nav>
<fans-card></fans-card>
</yun-div>
</
template
>
<
script
>
import
Nav
from
'../../../components/moblie/nav'
;
import
FansCard
from
"../../../components/moblie/fansCard"
;
export
default
{
components
:
{
FansCard
,
Nav
},
data
()
{
return
{
path
:
'/project'
,
navList
:
[
{
label
:
'全部项目'
,
id
:
'all'
},
{
label
:
'前端框架'
,
id
:
'10'
}
]
}
},
created
()
{
if
(
this
.
$route
.
query
.
type
)
{
return
}
this
.
$router
.
replace
({
path
:
'/project'
,
query
:
{
type
:
'all'
}
})
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
</
style
>
pages/project/index.vue
View file @
ddf36c88
<
template
>
<
template
>
<yun-slider>
<yun-div>
<yun-div
slot=
"card"
>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<Nav
:path=
"path"
:nav-list=
"navList"
></Nav>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
...
@@ -15,12 +12,12 @@
...
@@ -15,12 +12,12 @@
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</yun-div>
</yun-div>
</yun-slider>
</
template
>
</
template
>
<
script
>
<
script
>
import
Nav
from
"../../components/moblie/nav"
;
import
Nav
from
"../../components/moblie/nav"
;
import
ProjectCard
from
"../../components/moblie/projectCard"
;
import
ProjectCard
from
"../../components/moblie/projectCard"
;
export
default
{
export
default
{
components
:
{
ProjectCard
,
Nav
},
components
:
{
ProjectCard
,
Nav
},
data
()
{
data
()
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment