Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
MuGuiLin
uni-app
提交
1823aa00
U
uni-app
项目概览
MuGuiLin
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
1823aa00
编写于
12月 23, 2020
作者:
2
23700113@qq.com
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(h5): 修复actionSheet在h5端,数据量多无法滚动
上级
2f420ce3
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
154 addition
and
8 deletion
+154
-8
src/platforms/h5/components/app/popup/actionSheet.vue
src/platforms/h5/components/app/popup/actionSheet.vue
+154
-8
未找到文件。
src/platforms/h5/components/app/popup/actionSheet.vue
浏览文件 @
1823aa00
...
...
@@ -12,7 +12,17 @@
:style="popupStyle.content"
class="uni-actionsheet"
>
<div
class=
"uni-actionsheet__menu"
>
<div
ref=
"main"
class=
"uni-actionsheet__menu"
@
wheel=
"_handleWheel"
>
<!-- title占位 -->
<div
v-if=
"title"
class=
"uni-actionsheet__cell"
:style=
"
{height:`${titleHeight}px`}"
/>
<div
v-if=
"title"
class=
"uni-actionsheet__title"
...
...
@@ -20,13 +30,21 @@
{{
title
}}
</div>
<div
v-for=
"(itemTitle, index) in itemList"
:key=
"index"
:style=
"
{ color: itemColor }"
class="uni-actionsheet__cell"
@click="_close(index)"
:style=
"
{maxHeight:`${HEIGHT}px`,overflow:'hidden'}"
>
{{
itemTitle
}}
<div
ref=
"content"
>
<div
v-for=
"(itemTitle, index) in itemList"
:key=
"index"
:style=
"
{ color: itemColor }"
class="uni-actionsheet__cell"
@click="_close(index)"
>
{{
itemTitle
}}
</div>
</div>
</div>
</div>
<div
class=
"uni-actionsheet__action"
>
...
...
@@ -49,11 +67,50 @@
<
script
>
import
popup
from
'
./mixins/popup
'
import
keypress
from
'
../../../helpers/keypress
'
import
touchtrack
from
'
uni-mixins/touchtrack
'
import
scroller
from
'
uni-mixins/scroller/index
'
import
{
Friction
}
from
'
uni-mixins/scroller/Friction
'
import
{
Spring
}
from
'
uni-mixins/scroller/Spring
'
import
{
initScrollBounce
,
disableScrollBounce
}
from
'
uni-platform/helpers/scroll
'
// 由于模拟滚动阻止了点击,使用自定义事件来触发点击事件
function
initClick
(
dom
)
{
const
MAX_MOVE
=
20
let
x
=
0
let
y
=
0
dom
.
addEventListener
(
'
touchstart
'
,
(
event
)
=>
{
const
info
=
event
.
changedTouches
[
0
]
x
=
info
.
clientX
y
=
info
.
clientY
})
dom
.
addEventListener
(
'
touchend
'
,
(
event
)
=>
{
const
info
=
event
.
changedTouches
[
0
]
if
(
Math
.
abs
(
info
.
clientX
-
x
)
<
MAX_MOVE
&&
Math
.
abs
(
info
.
clientY
-
y
)
<
MAX_MOVE
)
{
const
customEvent
=
new
CustomEvent
(
'
click
'
,
{
bubbles
:
true
,
cancelable
:
true
,
target
:
event
.
target
,
currentTarget
:
event
.
currentTarget
});
[
'
screenX
'
,
'
screenY
'
,
'
clientX
'
,
'
clientY
'
,
'
pageX
'
,
'
pageY
'
].
forEach
(
key
=>
{
customEvent
[
key
]
=
info
[
key
]
})
event
.
target
.
dispatchEvent
(
customEvent
)
}
})
}
export
default
{
name
:
'
ActionSheet
'
,
components
:
{
keypress
},
mixins
:
[
popup
],
mixins
:
[
popup
,
touchtrack
,
scroller
],
props
:
{
title
:
{
type
:
String
,
...
...
@@ -78,9 +135,87 @@ export default {
default
:
false
}
},
data
()
{
return
{
HEIGHT
:
260
,
contentHeight
:
0
,
titleHeight
:
0
,
deltaY
:
0
,
scrollTop
:
0
}
},
watch
:
{
visible
(
newValue
)
{
if
(
newValue
)
{
this
.
$nextTick
(()
=>
{
// title 占位
if
(
this
.
title
)
{
this
.
titleHeight
=
document
.
querySelector
(
'
.uni-actionsheet__title
'
).
offsetHeight
}
// 滚动条更新
this
.
_scroller
.
update
()
// 获取contentHeight 滚动时使用
this
.
contentHeight
=
this
.
$refs
.
content
.
clientHeight
-
this
.
HEIGHT
// 给每一个项添加点击事件
document
.
querySelectorAll
(
'
.uni-actionsheet__cell
'
).
forEach
(
item
=>
{
initClick
(
item
)
})
})
}
}
},
mounted
()
{
// 模拟滚动使用
this
.
touchtrack
(
this
.
$refs
.
content
,
'
_handleTrack
'
,
true
)
this
.
$nextTick
(()
=>
{
this
.
initScroller
(
this
.
$refs
.
content
,
{
enableY
:
true
,
friction
:
new
Friction
(
0.0001
),
spring
:
new
Spring
(
2
,
90
,
20
),
onScroll
:
(
e
)
=>
{
this
.
scrollTop
=
e
.
target
.
scrollTop
}
})
})
initScrollBounce
()
},
methods
:
{
_close
(
tapIndex
)
{
this
.
$emit
(
'
close
'
,
tapIndex
)
},
_handleTrack
:
function
(
e
)
{
if
(
this
.
_scroller
)
{
switch
(
e
.
detail
.
state
)
{
case
'
start
'
:
this
.
_handleTouchStart
(
e
)
disableScrollBounce
({
disable
:
true
})
break
case
'
move
'
:
this
.
_handleTouchMove
(
e
)
break
case
'
end
'
:
case
'
cancel
'
:
this
.
_handleTouchEnd
(
e
)
disableScrollBounce
({
disable
:
false
})
}
}
},
_handleWheel
(
$event
)
{
const
deltaY
=
this
.
deltaY
+
$event
.
deltaY
if
(
Math
.
abs
(
deltaY
)
>
10
)
{
this
.
scrollTop
+=
deltaY
/
3
this
.
scrollTop
=
this
.
scrollTop
>=
this
.
contentHeight
?
this
.
contentHeight
:
this
.
scrollTop
<=
0
?
0
:
this
.
scrollTop
this
.
_scroller
.
scrollTo
(
this
.
scrollTop
)
}
else
{
this
.
deltaY
=
deltaY
}
$event
.
preventDefault
()
}
}
}
...
...
@@ -133,6 +268,17 @@ uni-actionsheet .uni-actionsheet__title {
cursor
:
pointer
;
}
uni-actionsheet
.uni-actionsheet__title
{
position
:
absolute
;
top
:
0
;
right
:
0
;
left
:
0
;
z-index
:
1
;
background-color
:
#fff
;
border-radius
:
5px
5px
0
0
;
border-bottom
:
1px
solid
#e5e5e5
;
}
uni-actionsheet
.uni-actionsheet__cell
:before
{
content
:
" "
;
position
:
absolute
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录