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/>组件中,并且必须是直接子节点,否则不能移动。

【movable-area、movable-view】 可移动区域组件说明的更多相关文章

  1. android 扩大view的响应区域

    1.Android提供TouchDelegate帮助实现扩大一个很小的view的点击区域 例如:https://developer.android.com/training/gestures/view ...

  2. 在ASP.NET MVC中使用Area区域

    在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它们分离开来,比如:Admin,Customer,Bill.ASP.NET MVC项目中把各 ...

  3. ASP.NET MVC5使用Area区域

    转载:http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它 ...

  4. MVC ASP.NET MVC5使用Area区域

    MVC  ASP.NET MVC5使用Area区域 一.为什么要使用area? 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它们分离开来 ...

  5. mvc Area(区域)相关技术

    ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块都由MVC中的三层所 ...

  6. 微信小程序组件解读和分析:二、scroll-view可滚动视图区域

    scroll-view可滚动视图区域组件说明: 可滚动视图区域. 组件用法:纵向滚动用法 Tip: 使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height,否则无法滚动. 当滚动到顶部 ...

  7. MVC View中获取action、controller、area名称

    获取控制器名称: ViewContext.RouteData.Values["controller"].ToString(); 获取Action名称: ViewContext.Ro ...

  8. View的个得区域函数getHitRect,getDrawingRect,getLocalVisibleRect,getGlobalVisibleRect(*)

    注意: OnCreate()函数中 调用下面函数,结果全为0,要等UI控件都加载完了才能得到绘制时的值. getHitRect 以父控件的左上为原点,计算当前view在父控件的区域,不管父控件在屏幕的 ...

  9. MVC View中获取action、controller、area名称、参数

    获取控制器名称: ViewContext.RouteData.Values["controller"].ToString(); 获取Action名称: ViewContext.Ro ...

随机推荐

  1. 11572 - Unique Snowflakes(贪心,两指针滑动保存子段最大长度)

    Emily the entrepreneur has a cool business idea: packaging and selling snowflakes. She has devised a ...

  2. Segmentation fault(Core Dump)

    Segmentation fault 这个提示还是比较常见的,这个提示就是段错误,这是翻译还是十分恰当的. Core Dump 有的时候给我们呈现的翻译很有趣是”吐核“,但是实际上比较贴切的翻译是核心 ...

  3. python 基于udp 连接

    #udp 服务端 #导入socket模块 from socket import * #ip加端口 类型为元组 ip_port=('127.0.0.1',8002) #最大接收字节 buffer_siz ...

  4. python3 基于tcp 简单client和server

    客户端代码 from socket import * #客户端 client=socket(AF_INET,SOCK_STREAM) #通讯地址 client.connect(('172.18.100 ...

  5. 为什么有时候binlog文件会很大于max_binlog_size以及max_binlog_cache_size

    问题描述 线上一个很有意思的现象,发现binlog文件大小是15G,查看了参数max_binlog_size是1073741824[1G], max_binlog_cache_size是2147483 ...

  6. app后端api设计【转】

    博客:https://blog.csdn.net/newjueqi/article/details/44037011 app和后端的交互,一般都是通过后端提供的api实现.api的设计,估计很多刚进入 ...

  7. hashcode和equals区别

    hashcode:对象的初始地址的整数表示 Java中的对象是JVM在管理,JVM会在她认为合适的时候对对象进行移动,比如,在某些需要整理内存碎片的GC算法下发生的GC.此时,对象的地址会变动,但ha ...

  8. Java三种代理模式

    本文转自:https://mp.weixin.qq.com/s/nBmbNP2mR7ei-lDsuOxjWg 代理模式 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象 ...

  9. 面试题——Java虚拟机

    一.运行时数据区域 Java虚拟机在执行Java程序的时候会把它所管理的内存划分为若干个不同的数据区域,这些区域各有用途: 程序计数器:(线程私有的) 程序计数器是一块较小的内存,可以看作是当前线程所 ...

  10. 在多字节的目标代码页中,没有此 Unicode 字符可以映射到的字符。 (#1113)

    报错 在使用MySQL-Front导入sql文件时报错1113:在多字节的目标代码页中,没有此 Unicode 字符可以映射到的字符. (#1113) 解决方案 导入.sql文件时,单击 选择文件对话 ...