【movable-area、movable-view】 可移动区域组件说明
2024-09-22 00:12:42
movable-area、movable-view 可移动区域组件
原型:
<movable-area scale-area="[Boolean]">
<movable-view
direction="[all|vertical|horizontal|none]"
inertia="[Boolean]"
out-of-bounds="[Boolean]"
x="[Number|String]"
y="[Number|String]"
damping="[Number]"
friction="[Number]"
disabled="[Boolean]"
scale="[Boolean]"
scale-min="[Number]"
scale-max="[Number]"
scale-value="[Number]"
animation="[Boolean]"
bindchange="[EventHandle]"
bindscale="[EventHandle]"
htouchmove="[EventHandle]"
vtouchmove="[EventHandle]"
>
</movable-view>
</movable-area>
<movable-area>组件属性说明:
属性 | 是否必需 | 类型 | 默认值 | 说明 |
scale-area | 否 | Boolean | false | 当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area |
<movable-view>组件属性说明:
属性 | 是否必需 | 类型 | 默认值 | 说明 |
direction | 否 | [all | vertical | horizontal | none] | none | 移动方向,默认值为none不能移动 |
inertia | 否 | Boolean | false | 是否带有惯性移动 |
out-of-bounds | 否 | Boolean | false | 超过可移动区域后,movable-view是否还可以移动(可移动但会自动回移到movable-area的区域内) |
x | 否 | [String | Number] | 0 | 定义组件位于movable-area内的x轴坐标,比如: 30 或 30px |
y | 否 | [String | Number] | 0 | 定义组件位于movable-area内的y轴坐标 |
damping | 否 | Number | 20 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 |
friction | 否 | Number | 2 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 |
disabled | 否 | Boolean | false | 是否禁用移动 |
scale | 否 | Boolean | false | 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 |
scale-min | 否 | Number | 0.5 | 定义缩放倍数最小值 |
scale-max | 否 | Number | 10 | 定义缩放倍数最大值 |
scale-value | 否 | Number | 1 | 定义缩放倍数,取值范围为 0.5 - 10 |
animation | 否 | Boolean | false | 是否使用动画 |
bindchange | 否 | EventHandle |
拖动过程中触发的事件,自带event参数 event.detail = {x: x, y: y, source: source} event.detail.source表示产生移动的原因 1) 值为touch 表示拖动 2) 值为touch-out-of-bounds 超出移动范围 3) 值为out-of-bounds 超出移动范围后的回弹 4) 值为friction表示惯性 5)值为空字符串 表示通过 js控制了移动 |
|
bindscale | 否 | EventHandle |
缩放过程中触发的事件,自带event参数 event.detail = {x: x, y: y, scale: scale} |
|
htouchmove | 否 | EventHandle | 初次手指触摸后移动为横向的移动,如果catch此事件,则意味着touchmove事件也被catch | |
vtouchmove | 否 | EventHandle | 初次手指触摸后移动为纵向的移动,如果catch此事件,则意味着touchmove事件也被catch |
注意事项:
1)movable-view 必须设置width和height属性,不设置默认为10px
2)movable-view 默认为绝对定位,top和left属性为0px
3)当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
4)movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。
最新文章
- Stimulsoft入门视频
- iOS App上架AppStore 会遇到的坑
- 利用Dreamweaver配置PHP服务器的站点
- 告诉你吧,一套皮肤在winform与wpf开发模式下实现的界面效果同样精彩,winform界面和wpf界面。
- sccm部署win7原版系统系统盘为D盘
- http协议知识整理(转)
- Android FM学习中的模块 FM启动过程
- 【Java每日一题】20170112
- es6语法
- docker--数据卷与数据卷容器
- Linux 虚拟文件系统概述
- python练习一—文本转化渲染为html
- git rebase的用法
- maven——依赖管理
- decode 函数用法
- 【转】25个非常实用的jQuery/CSS3应用组件
- circRNA研究手册
- Angularjs 源码
- 快速理解python2中的编码问题
- 将int型数字转换成6位字符串,不足的时候,前面补0