【movable-area、movable-view】可移动区域组件说明

movable-area、movable-view 可移动区域组件

原型：

 1 <movable-area scale-area="[Boolean]">
 2     <movable-view
 3         direction="[all|vertical|horizontal|none]"
 4         inertia="[Boolean]"
 5         out-of-bounds="[Boolean]"
 6         x="[Number|String]"
 7         y="[Number|String]"
 8         damping="[Number]"
 9         friction="[Number]"
10         disabled="[Boolean]"
11         scale="[Boolean]"
12         scale-min="[Number]"
13         scale-max="[Number]"
14         scale-value="[Number]"
15         animation="[Boolean]"
16         bindchange="[EventHandle]"
17         bindscale="[EventHandle]"
18         htouchmove="[EventHandle]"
19         vtouchmove="[EventHandle]"
20     >
21     </movable-view>
22 </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/>组件中，并且必须是直接子节点，否则不能移动。

转载于:https://www.cnblogs.com/wm218/p/9889221.html

【movable-area、movable-view】可移动区域组件说明相关推荐

OSPF协议将其管理的网络划分为不同类型的若干区域（Area），其中标准区域特点是（64）；存根区域（stub）的特点是（65）。【答案】C B
OSPF协议将其管理的网络划分为不同类型的若干区域(Area),其中标准区域特点是(64):存根区域(stub)的特点是(65). (64)A.不接受本地AS之外的路由信息,也不接受其他区域的路由汇总 ...
【iOS-Cocos2d游戏开发之七】添加/删除系统组件，并解决View设置透明会影响View中的其他组件的问题！...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/455.html ...
目录树组件QTreeWidget和停靠区域组件QDockWidget的用法
简述: 目录树组件QTreeWidget和停靠区域组件QDockWidget的和QScrollArea用法:然后写的一个小的相册查看器例子文章目录 QTreeWidget组件: QDockWidg ...
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )
文章目录一. GPU 过度绘制优化总结二. CPU 渲染过程三. CPU 渲染性能调试工具 Layout Inspector 四. Layout Inspector 组件树 DecorView ...
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性复用像素格式 | 图像绘制 )
文章目录一.获取图像真实宽高二.计算解码区域三.设置解码参数内存复用像素格式四.图像绘制五.执行效果六.源码及资源下载官方文档 API : BitmapRegionDecoder 在 ...
ASP.NET MVC5使用Area区域
转载:http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它 ...
疯狂Android讲义（二）——第一部分：界面编程与视图 (View) 组件详解
这里主要针对一些控件和布局的使用,篇幅会有点长.而且,不会像第一章一样全部详细列出.本章主要会用知识点的方式展示内容. ① Android应用开发的-项内容就是用户界面的开发.不管应用实际包含的逻辑多 ...
uni-app view组件基本使用
视图容器之一view <template><div><h2>详情页</h2><view>我是一个大盒子</view></d ...
.Net MVC3中取得当前区域的名字（Area name）
在代码中: ControllerContext.RouteData.DataTokens["area"] 在View中: ViewContext.RouteData.DataTok ...

【movable-area、movable-view】可移动区域组件说明

movable-area、movable-view 可移动区域组件

【movable-area、movable-view】可移动区域组件说明相关推荐

最新文章

热门文章

【movable-area、movable-view】 可移动区域组件说明

movable-area、movable-view 可移动区域组件

【movable-area、movable-view】 可移动区域组件说明相关推荐

最新文章

热门文章

【movable-area、movable-view】可移动区域组件说明

【movable-area、movable-view】可移动区域组件说明相关推荐