小程序开放平台

文档中心
表单组件
基础内容
媒体组件
地图
视图容器
movable-area
movable-view
scroll-view
swiper
swiper-item
view
导航组件
开放能力
画布

movable-view

开发
>
组件
>
视图容器
>
movable-view
>
更新时间:2025-12-09 14:56:23

movable-view

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

属性
类型
默认值
必填
说明
directionstringnonemovable-view的移动方向,属性值有all、vertical、horizontal、none
inertiabooleanfalsemovable-view是否带有惯性
out-of-boundsbooleanfalse超过可移动区域后,movable-view是否还可以移动
xnumber,string定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画;单位支持px(默认)
ynumber,string定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画;单位支持px(默认)
dampingnumber20阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快
frictionnumber2摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值
disabledbooleanfalse是否禁用
scalebooleanfalse是否支持双指缩放,默认缩放手势生效区域是在movable-view内
scale-minnumber0.5定义缩放倍数最小值
scale-maxnumber10定义缩放倍数最大值
scale-valuenumber1定义缩放倍数,取值范围为 0.5 - 10
animationbooleantrue是否使用动画
bindchangeeventhandle拖动过程中触发的事件,event.detail = {x, y, source}, 其中 source 表示产生移动的原因,值可为 touch(拖动)
bindscaleeventhandle缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持
htouchmoveeventhandle初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch
vtouchmoveeventhandle初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch

扫码预览

组件示例

该文档是否对您有帮助?