Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
840a290d
U
uni-app
项目概览
DCloud
/
uni-app
3 个月 前同步成功
通知
718
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
840a290d
编写于
2月 20, 2020
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update: app-vue + h5 <scroll-view> 支持自定义下拉刷新
上级
7d9ec54a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
185 addition
and
1 deletion
+185
-1
src/core/view/components/scroll-view/index.vue
src/core/view/components/scroll-view/index.vue
+185
-1
未找到文件。
src/core/view/components/scroll-view/index.vue
浏览文件 @
840a290d
...
...
@@ -8,6 +8,48 @@
:style=
"
{'overflow-x': scrollX?'auto':'hidden','overflow-y': scrollY?'auto':'hidden'}"
class="uni-scroll-view">
<div
ref=
"content"
>
<div
v-if=
"refresherEnabled"
ref=
"refresherinner"
:style=
"
{'background-color': refresherBackground, 'height': refresherHeight + 'px'}"
class="uni-scroll-view-refresher">
<div
v-if=
"refresherDefaultStyle !== 'none'"
class=
"uni-scroll-view-refresh"
>
<div
class=
"uni-scroll-view-refresh-inner"
>
<svg
v-if=
"refreshState=='pulling'"
:style=
"
{'transform': 'rotate('+ refreshRotate +'deg)'}"
fill="#2BD009"
class="uni-scroll-view-refresh__icon"
width="24"
height="24"
viewBox="0 0 24 24">
<path
d=
"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
/>
<path
d=
"M0 0h24v24H0z"
fill=
"none"
/>
</svg>
<svg
v-if=
"refreshState=='refreshing'"
class=
"uni-scroll-view-refresh__spinner"
width=
"24"
height=
"24"
viewBox=
"25 25 50 50"
>
<circle
cx=
"50"
cy=
"50"
r=
"20"
fill=
"none"
style=
"color: #2BD009;"
stroke-width=
"3"
/>
</svg>
</div>
</div>
<slot
v-if=
"refresherDefaultStyle=='none'"
name=
"refresher"
/>
</div>
<slot/>
</div>
</div>
...
...
@@ -24,6 +66,10 @@ import {
const
passiveOptions
=
supportsPassive
?
{
passive
:
true
}
:
false
// const PULLING = 'pulling'
// const REFRESHING = 'refreshing'
export
default
{
name
:
'
ScrollView
'
,
mixins
:
[
scroller
],
...
...
@@ -63,6 +109,26 @@ export default {
enableBackToTop
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
refresherEnabled
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
refresherThreshold
:
{
type
:
Number
,
default
:
45
},
refresherDefaultStyle
:
{
type
:
String
,
default
:
'
back
'
},
refresherBackground
:
{
type
:
String
,
default
:
'
#fff
'
},
refresherTriggered
:
{
type
:
[
Boolean
,
String
],
default
:
false
}
},
data
()
{
...
...
@@ -70,7 +136,10 @@ export default {
lastScrollTop
:
this
.
scrollTopNumber
,
lastScrollLeft
:
this
.
scrollLeftNumber
,
lastScrollToUpperTime
:
0
,
lastScrollToLowerTime
:
0
lastScrollToLowerTime
:
0
,
refresherHeight
:
0
,
refreshRotate
:
0
,
refreshState
:
'
pulling
'
}
},
computed
:
{
...
...
@@ -98,6 +167,14 @@ export default {
},
scrollIntoView
(
val
)
{
this
.
_scrollIntoViewChanged
(
val
)
},
refresherTriggered
(
val
)
{
// TODO
if
(
val
===
true
)
{
this
.
_setRefreshState
(
'
refreshing
'
)
}
else
if
(
val
===
false
)
{
this
.
_setRefreshState
(
'
restore
'
)
}
}
},
mounted
()
{
...
...
@@ -151,6 +228,23 @@ export default {
if
(
needStop
)
{
event
.
stopPropagation
()
}
if
(
self
.
refresherEnabled
&&
self
.
refreshState
!==
'
refreshing
'
&&
touchStart
&&
main
.
scrollTop
===
0
)
{
let
dy
=
y
-
touchStart
.
y
self
.
refresherHeight
=
dy
let
rotate
=
dy
/
self
.
refresherThreshold
if
(
rotate
>
1
)
{
rotate
=
1
}
else
{
rotate
=
rotate
*
360
}
self
.
refreshRotate
=
rotate
self
.
$trigger
(
'
refresherpulling
'
,
event
,
{
deltaY
:
dy
})
}
}
this
.
__handleTouchStart
=
function
(
event
)
{
...
...
@@ -163,12 +257,22 @@ export default {
x
:
event
.
touches
[
0
].
pageX
,
y
:
event
.
touches
[
0
].
pageY
}
if
(
self
.
refresherEnabled
&&
self
.
refreshState
!==
'
refreshing
'
&&
self
.
$refs
.
main
.
scrollTop
===
0
)
{
self
.
refreshState
=
'
pulling
'
}
}
}
this
.
__handleTouchEnd
=
function
(
event
)
{
touchStart
=
null
disableScrollBounce
({
disable
:
false
})
if
(
self
.
refresherHeight
>=
self
.
refresherThreshold
)
{
self
.
_setRefreshState
(
'
refreshing
'
)
}
else
{
self
.
refresherHeight
=
0
self
.
$trigger
(
'
refresherabort
'
,
event
,
{})
}
}
this
.
$refs
.
main
.
addEventListener
(
'
touchstart
'
,
this
.
__handleTouchStart
,
passiveOptions
)
this
.
$refs
.
main
.
addEventListener
(
'
touchmove
'
,
this
.
__handleTouchMove
,
passiveOptions
)
...
...
@@ -374,6 +478,19 @@ export default {
this
.
$refs
.
content
.
removeEventListener
(
'
transitionend
'
,
this
.
__transitionEnd
)
this
.
$refs
.
content
.
removeEventListener
(
'
webkitTransitionEnd
'
,
this
.
__transitionEnd
)
},
_setRefreshState
(
state
)
{
switch
(
state
)
{
case
'
refreshing
'
:
this
.
refresherHeight
=
this
.
refresherThreshold
this
.
$trigger
(
'
refresherrefresh
'
,
event
,
{})
break
case
'
restore
'
:
this
.
refresherHeight
=
0
this
.
$trigger
(
'
refresherrestore
'
,
{},
{})
break
}
this
.
refreshState
=
state
},
getScrollPosition
()
{
const
main
=
this
.
$refs
.
main
return
{
...
...
@@ -402,4 +519,71 @@ uni-scroll-view[hidden] {
height
:
100%
;
max-height
:
inherit
;
}
.uni-scroll-view-refresher
{
position
:
relative
;
overflow
:
hidden
;
}
.uni-scroll-view-refresh
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
}
.uni-scroll-view-refresh-inner
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
line-height
:
0
;
width
:
40px
;
height
:
40px
;
border-radius
:
50%
;
background-color
:
#fff
;
box-shadow
:
0
1px
6px
rgba
(
0
,
0
,
0
,
.117647
),
0
1px
4px
rgba
(
0
,
0
,
0
,
.117647
);
}
.uni-scroll-view-refresh__spinner
{
transform-origin
:
center
center
;
animation
:
uni-scroll-view-refresh-rotate
2s
linear
infinite
;
}
.uni-scroll-view-refresh__spinner
>
circle
{
stroke
:
currentColor
;
stroke-linecap
:
round
;
animation
:
uni-scroll-view-refresh-dash
2s
linear
infinite
;
}
@keyframes
uni-scroll-view-refresh-rotate
{
0
%
{
transform
:
rotate
(
0deg
);
}
100
%
{
transform
:
rotate
(
360deg
);
}
}
@keyframes
uni-scroll-view-refresh-dash
{
0
%
{
stroke-dasharray
:
1
,
200
;
stroke-dashoffset
:
0
;
}
50
%
{
stroke-dasharray
:
89
,
200
;
stroke-dashoffset
:
-35px
;
}
100
%
{
stroke-dasharray
:
89
,
200
;
stroke-dashoffset
:
-124px
;
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录