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
5931323a
Commit
5931323a
authored
Mar 15, 2020
by
高浩杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完善注册页面 blog上拉加载
parent
38112b34
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
185 additions
and
2 deletions
+185
-2
pages/blog/index.vue
+163
-2
pages/users/register.vue
+22
-0
No files found.
pages/blog/index.vue
View file @
5931323a
<
template
>
<yun-slider>
<yun-slider
@
touchstart
.
native=
"touchStart($event)"
@
touchmove
.
native=
"touchMove($event)"
@
touchend
.
native=
"touchend($event)"
class=
"load-moudle"
>
<yun-div
slot=
"card"
>
...
...
@@ -14,6 +19,15 @@
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<yun-div
:width-v=
"750"
:height-v=
"104"
:show-ske=
"false"
:font-style=
"[24,104,500,'#999','center']"
v-if=
"isLoading"
>
加载中
</yun-div>
</yun-div>
</yun-slider>
</
template
>
...
...
@@ -21,6 +35,7 @@
<
script
>
import
Nav
from
"../../components/moblie/nav"
;
import
ProjectCard
from
"../../components/moblie/projectCard"
;
export
default
{
components
:
{
ProjectCard
,
Nav
},
data
()
{
...
...
@@ -67,7 +82,19 @@ export default {
label
:
'python'
,
id
:
'18'
}
]
],
top
:
0
,
pullUpState
:
0
,
// 1:上拉加载更多, 2:加载中……, 3:我是有底线的
isLoading
:
false
,
// 是否正在加载
pullUpInfo
:
{
moreText
:
'上拉加载更多'
,
loadingText
:
'数据加载中...'
,
noMoreText
:
'我是有底线的'
},
startX
:
0
,
startY
:
0
,
endX
:
0
,
endY
:
0
}
},
created
()
{
...
...
@@ -80,6 +107,140 @@ export default {
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
>
...
...
pages/users/register.vue
View file @
5931323a
...
...
@@ -124,6 +124,28 @@
</yun-div>
</yun-div>
</yun-div>
<yun-div
:width-v=
"704"
:height-v=
"520"
:padding-v=
"[72,60]"
:margin-v=
"[0,'auto']"
:extend-style=
"
{boxSizing: 'border-box'}"
:border-r="[8]"
bg-color-v="#fff"
:flex-v="['column','flex-start','center']"
v-if="false"
>
<yun-icon
name=
"success"
:size=
"80"
color=
"#75D098"
:style=
"
{lineHeight: commonReturnFlexedLength(40)}">
</yun-icon>
<yun-div
:font-style=
"[26,35,500,'#75D098','center']"
:margin-v=
"[19,0,0]"
>
注册成功
</yun-div>
<yun-div
:font-style=
"[28,37,500,'#333','center']"
:margin-v=
"[55,0,64,0]"
>
请查看邮箱收件箱验证账号
</yun-div>
<yun-button
:border-r=
"[8]"
bg-color=
"#75D098"
:size=
"[584,86]"
:font-style=
"[26,35,500,'#fff','center']"
>
前往验证
</yun-button>
</yun-div>
<page-footer
style=
"position: fixed;bottom:0;"
></page-footer>
</yun-div>
</
template
>
...
...
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