消息推送客服

movable-view 可移动视图容器
收藏
我的收藏

基础库 2.25.0 开始支持本组件，低版本需做兼容处理。

可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
direction	string	none	否	movable-view 的移动方向，属性值有 all、vertical、horizontal、none。	2.25.0
inertia	boolean	false	否	movable-view 是否带有惯性。	2.25.0
out-of-bounds	boolean	false	否	超过可移动区域后，movable-view 是否还可以移动。	2.25.0
x	number \| string	无	否	定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。	2.25.0
y	number \| string	无	否	定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。	2.25.0
damping	number	20	否	阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。	2.25.0
friction	number	2	否	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值。	2.25.0
disabled	boolean	false	否	是否禁用。	2.25.0
scale	boolean	false	否	是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内。	2.25.0
scale-min	number	0.5	否	定义缩放倍数最小值。	2.25.0
scale-max	number	10	否	定义缩放倍数最大值。	2.25.0
scale-value	number	1	否	定义缩放倍数，取值范围为 0.5 ~ 10。	2.25.0
animation	boolean	true	否	是否使用动画。	2.25.0
bindchange	EventHandle	无	否	拖动过程中触发的事件。	2.25.0
bindscale	EventHandle	无	否	缩放过程中触发的事件。	2.25.0
bindhtouchmove	EventHandle	无	否	初次手指触摸后移动为横向的移动时触发。	2.25.0
bindvtouchmove	EventHandle	无	否	初次手指触摸后移动为纵向的移动时触发。	2.25.0

bindchange 事件对象的 detail

object 类型，属性如下：

属性名	类型	说明	最低支持版本
x	number	x 轴方向的偏移	2.25.0
y	number	y 轴方向的偏移	2.25.0
source	string	产生移动的原因	2.25.0

source 的合法值

值	说明	最低支持版本
touch	拖动	2.25.0
touch-out-of-bounds	超出移动范围	2.25.0
out-of-bounds	超出移动范围后的回弹	2.25.0
friction	惯性	2.25.0
空字符串	setData	2.25.0

bindscale 事件对象的 detail

object 类型，属性如下：

属性名	类型	说明	最低支持版本
x	number	x 轴方向的偏移	2.25.0
y	number	y 轴方向的偏移	2.25.0
scale	number	缩放倍数	2.25.0

扫码体验

代码示例

开发者工具中预览

Bug & Tip

•

Tip：movable-view 必须设置 width 和 height 属性，不设置默认为 10px；

•

Tip：movable-view 默认为绝对定位，top 和 left 属性为 0px。