Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
m0_68066342
uni-app
提交
459fa6ba
U
uni-app
项目概览
m0_68066342
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
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,发现更多精彩内容 >>
未验证
提交
459fa6ba
编写于
6月 25, 2020
作者:
W
wanganxp
提交者:
GitHub
6月 25, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update movable-view.md
上级
94f8a219
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
25 addition
and
10 deletion
+25
-10
docs/component/movable-view.md
docs/component/movable-view.md
+25
-10
未找到文件。
docs/component/movable-view.md
浏览文件 @
459fa6ba
#### movable-area
`movable-view`
的可移动区域
可拖动区域组件。
由于app和小程序的架构是逻辑层与视图层分离,使用js监听拖动时会引发逻辑层和视图层的频繁通讯,影响性能。为了方便高性能的实现拖动,平台特封装了
`movable-area`
组件。
`movable-area`
指代可拖动的范围,在其中内嵌
`movable-view`
组件用于指示可拖动的区域。
即手指/鼠标按住
`movable-view`
拖动或双指缩放,但拖不出
`movable-area`
规定的范围。
当然也可以不拖动,而使用代码来触发
`movable-view`
在
`movable-area`
里的移动缩放。
`movable-view`
的规范另见
[
下文
](
/component/movable-view?id=movable-view
)
。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
:-:|:-:|
|√|√|√|√|√|x|√|
√|√|
**属性说明**
...
...
@@ -16,17 +26,19 @@
**注意:movable-area 必须设置 width 和 height 属性,不设置默认为 10px**
-
movable-area app-nvue平台 暂不支持手势缩放,并且和滚动冲突。
-
PC平台不支持 movable-area。
#### movable-view
可移动的视图容器,在页面中可以拖拽滑动
可移动的视图容器,在页面中可以拖拽滑动或双指缩放。
`movable-view`
必须在
`movable-area`
组件中,并且必须是直接子节点,否则不能移动。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|x|√|
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
快应用|360小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
:-:|:-:|
|√|√|√|√|√|x|√|
√|√|
**属性说明**
...
...
@@ -66,8 +78,11 @@
-
如果遇到x、y、scale属性设置不生效的问题参考:
[
组件属性设置不生效解决办法
](
/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
)
-
除了H5端和app-nvue端,其他平台不支持内嵌video、map等原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用
**示例**
**示例**
[
查看演示
](
https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view
)
以下示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
```
html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view
class=
"page-body"
>
<view
class=
"uni-padding-wrap uni-common-mt"
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录