阿里云首页 管理控制台

movable-view 可移动视图容器

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

注意:

  • movable-view 必须设置 width 和 height 属性,不设置默认为 10px。

  • movable-view 默认为绝对定位(请不要修改),top 和 left 属性为 0px。

  • 当 movable-view 小于 movable-area 时,movable-view 的移动范围是在 movable-area 内;当 movable-view 大于 movable-area 时,movable-view 的移动范围必须包含 movable-area (x 轴方向和 y 轴方向分开考虑)。

扫码体验

image.png

示例代码

<!-- API-DEMO page/component/movable-view.axml -->
<view class="page">
  <view class="page-description">可移动视图</view>
  <view class="page-section">
    <view class="page-section-title">movable-view区域小于movable-area</view>
    <view class="page-section-demo">
      <movable-area>
        <movable-view x="{{x}}" y="{{y}}" direction="all">movable-view</movable-view>
      </movable-area>
    </view>
    <button style="margin-left: 10px; mrigin-right: 10px;" type="primary" onTap="onButtonTap">点击移动到 (30px, 30px)</button>
  </view>
  <view class="page-section">
    <view class="page-section-title">movable-view区域大于movable-area</view>
    <view class="page-section-demo">
      <movable-area>
        <movable-view class="max" direction="all">movable-view</movable-view>
      </movable-area>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">只可以横向移动</view>
    <view class="page-section-demo">
     <movable-area>
        <movable-view direction="horizontal">
          movable-view
        </movable-view>
      </movable-area>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">只可以纵向移动</view>
    <view class="page-section-demo">
     <movable-area>
        <movable-view direction="vertical">
          movable-view
        </movable-view>
      </movable-area>
    </view>
  </view>
</view>
// API-DEMO page/component/movable-view.js
Page({
  data: {
    x: 0,
    y: 0,
  },
  onButtonTap() {
    const { x, y } = this.data;
    if (x === 30) {
      this.setData({
        x: x + 1,
        y: y + 1,
      });
    } else {
      this.setData({
        x: 30,
        y: 30
      });
    }
  },
});
// API-DEMO page/component/movable-view.json
{
  "allowsBounceVertical": "NO"
}
/* API-DEMO page/component/movable-view.acss */
movable-area {
  height: 400rpx;
  width: 400rpx;
  margin: 50rpx 0rpx 0 50rpx;
  background-color: #ccc;
  overflow: hidden;
}
movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  width: 200rpx;
  background: #108ee9;
  color: #fff;
}
.max {
  width: 600rpx;
  height: 600rpx;
}

属性

属性名

类型

默认值

描述

direction

String

none

movable-view 的移动方向,属性值有 all、vertical、horizontal、none

inertia

Boolean

false

movable-view是否带有惯性

out-of-bounds

Boolean

false

超过可移动区域后,movable-view是否还可以移动

x

Number

0

定义 x 轴方向的偏移,会换算为 left 属性,如果 x 的值不在可移动范围内,会自动移动到可移动范围

y

Number

0

定义 y 轴方向的偏移,会换算为 top 属性,如果 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

是否使用动画

onTouchStart

EventHandle

-

触摸动作开始,事件会向父节点传递。

catchTouchStart

EventHandle

-

触摸动作开始,事件仅作用于组件,不向父节点传递。

onTouchMove

EventHandle

-

触摸移动事件,事件会向父节点传递。

catchTouchMove

EventHandle

-

触摸移动事件,事件仅作用于组件,不向父节点传递。

onTouchEnd

EventHandle

-

触摸动作结束,事件会向父节点传递。

catchTouchEnd

EventHandle

-

触摸动作结束,事件仅作用于组件,不向父节点传递。

onTouchCancel

EventHandle

-

触摸动作被打断,如来电提醒,弹窗

onChange

EventHandle

-

拖动过程中触发的事件,

event.detail = {x: x, y: y, source: source}

,其中 source 表示产生移动的原因,值可为 touch(拖动)

onChangeEnd

EventHandle

-

拖动结束触发的事件,

event.detail = {x: x, y: y}

onScale

EventHandle

-

缩放过程中触发的事件,event.detail = {x, y, scale}

onChange返回值detail.source

source字段表示产生移动的原因

说明

touch

拖动

touch-out-of-bounds

超出移动范围

out-of-bounds

超出移动范围后的回弹

friction

惯性

空字符串

setData

说明:冒泡事件,请查看 事件介绍 中的 事件类型