Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
08bf6a1e
U
uni-app
项目概览
Velpro187
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
08bf6a1e
编写于
8月 25, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: H5 端 uni.previewImage 支持移动端手势缩放 close #1170
上级
962e5353
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
119 addition
and
16 deletion
+119
-16
build/manifest.js
build/manifest.js
+2
-0
src/platforms/h5/components/system-routes/preview-image/image-view.vue
.../h5/components/system-routes/preview-image/image-view.vue
+107
-0
src/platforms/h5/components/system-routes/preview-image/index.vue
...forms/h5/components/system-routes/preview-image/index.vue
+10
-16
未找到文件。
build/manifest.js
浏览文件 @
08bf6a1e
...
@@ -33,6 +33,8 @@ const DEPS = {
...
@@ -33,6 +33,8 @@ const DEPS = {
previewImage
:
[
previewImage
:
[
[
'
/core/view/components/swiper/index.vue
'
,
'
Swiper
'
],
[
'
/core/view/components/swiper/index.vue
'
,
'
Swiper
'
],
[
'
/core/view/components/swiper-item/index.vue
'
,
'
SwiperItem
'
],
[
'
/core/view/components/swiper-item/index.vue
'
,
'
SwiperItem
'
],
[
'
/core/view/components/movable-area/index.vue
'
,
'
MovableArea
'
],
[
'
/core/view/components/movable-view/index.vue
'
,
'
MovableView
'
],
[
'
/platforms/h5/components/system-routes/preview-image/index.vue
'
,
'
PreviewImage
'
]
[
'
/platforms/h5/components/system-routes/preview-image/index.vue
'
,
'
PreviewImage
'
]
],
],
showToast
:
TOAST_DEPS
,
showToast
:
TOAST_DEPS
,
...
...
src/platforms/h5/components/system-routes/preview-image/image-view.vue
0 → 100644
浏览文件 @
08bf6a1e
<
template
>
<v-uni-movable-area
class=
"image-view-area"
@
touchstart.native=
"onTouchStart"
@
touchmove.native=
"checkDirection"
@
touchend.native=
"onTouchEnd"
>
<v-uni-movable-view
class=
"image-view-view"
:direction=
"direction"
inertia
scale
scale-min=
"1"
scale-max=
"4"
@
scale=
"onScale"
>
<img
:src=
"src"
class=
"image-view-img"
@
load=
"onImgLoad"
>
</v-uni-movable-view>
</v-uni-movable-area>
</
template
>
<
script
>
export
default
{
name
:
'
ImageView
'
,
props
:
{
src
:
{
type
:
String
,
default
:
''
}
},
data
()
{
return
{
direction
:
'
none
'
}
},
created
()
{
this
.
scale
=
1
this
.
imgWidth
=
0
this
.
imgHeight
=
0
this
.
width
=
0
this
.
height
=
0
},
methods
:
{
onScale
({
detail
:
{
scale
}
})
{
this
.
scale
=
scale
},
onImgLoad
(
event
)
{
const
target
=
event
.
target
const
rect
=
target
.
getBoundingClientRect
()
this
.
imgWidth
=
rect
.
width
this
.
imgHeight
=
rect
.
height
},
onTouchStart
(
event
)
{
const
$el
=
this
.
$el
const
rect
=
$el
.
getBoundingClientRect
()
this
.
width
=
rect
.
width
this
.
height
=
rect
.
height
this
.
checkDirection
(
event
)
},
onTouchEnd
(
event
)
{
const
scale
=
this
.
scale
const
horizontal
=
scale
*
this
.
imgWidth
>
this
.
width
const
vertical
=
scale
*
this
.
imgHeight
>
this
.
height
if
(
horizontal
&&
vertical
)
{
this
.
direction
=
'
all
'
}
else
if
(
horizontal
)
{
this
.
direction
=
'
horizontal
'
}
else
if
(
vertical
)
{
this
.
direction
=
'
vertical
'
}
else
{
this
.
direction
=
'
none
'
}
this
.
checkDirection
(
event
)
},
checkDirection
(
event
)
{
// 避免水平滑动和 swiper 冲突
const
direction
=
this
.
direction
if
(
direction
===
'
all
'
||
direction
===
'
horizontal
'
)
{
event
.
stopPropagation
()
}
}
}
}
</
script
>
<
style
>
.image-view-area
,
.image-view-view
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
}
.image-view-img
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
max-height
:
100%
;
max-width
:
100%
;
}
</
style
>
src/platforms/h5/components/system-routes/preview-image/index.vue
浏览文件 @
08bf6a1e
<
template
>
<
template
>
<div
<div
class=
"uni-system-preview-image"
class=
"uni-system-preview-image"
@
click=
"_click"
@
click=
"_click"
>
>
<v-uni-swiper
<v-uni-swiper
:current.sync=
"index"
:current.sync=
"index"
:indicator-dots=
"false"
:indicator-dots=
"false"
:autoplay=
"false"
:autoplay=
"false"
class=
"uni-s
wiper"
class=
"uni-s
ystem-preview-image-swiper"
>
>
<v-uni-swiper-item
<v-uni-swiper-item
v-for=
"(src,key) in urls"
v-for=
"(src,key) in urls"
:key=
"key"
:key=
"key"
>
>
<img
<image-view
:src=
"src"
/>
:src=
"src"
class=
"uni-preview-image"
>
</v-uni-swiper-item>
</v-uni-swiper-item>
</v-uni-swiper>
</v-uni-swiper>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
imageView
from
'
./image-view
'
export
default
{
export
default
{
name
:
'
SystemPreviewImage
'
,
name
:
'
SystemPreviewImage
'
,
components
:
{
imageView
},
data
()
{
data
()
{
const
{
const
{
urls
,
urls
,
...
@@ -74,19 +76,11 @@ export default {
...
@@ -74,19 +76,11 @@ export default {
height
:
100%
;
height
:
100%
;
background
:
black
;
background
:
black
;
}
}
.uni-swiper
{
.uni-s
ystem-preview-image-s
wiper
{
position
:
absolute
;
position
:
absolute
;
left
:
0
;
left
:
0
;
top
:
0
;
top
:
0
;
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
}
}
.uni-preview-image
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
max-height
:
100%
;
max-width
:
100%
;
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录