支付寶小程序組件 可移動視圖容器·movable-view

版本要求：基礎(chǔ)庫 1.11.0 或更高版本；若版本較低，建議做 兼容處理。

可移動的視圖容器，在頁面中可以拖拽滑動。movable-view 必須在 movable-area 組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動。

注意：

• movable-view 必須設(shè)置 width 和 height 屬性，不設(shè)置默認(rèn)為 10px。
• movable-view 默認(rèn)為絕對定位(請不要修改)，top 和 left 屬性為 0px。
• 當(dāng) movable-view 小于 movable-area 時(shí)，movable-view 的移動范圍是在 movable-area 內(nèi)；當(dāng) movable-view 大于 movable-area 時(shí)，movable-view 的移動范圍必須包含 movable-area （x 軸方向和 y 軸方向分開考慮）。

掃碼體驗(yàn)

示例代碼

<!-- 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區(qū)域小于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">點(diǎn)擊移動到 (30px, 30px)</button>
  </view>
  <view class="page-section">
    <view class="page-section-title">movable-view區(qū)域大于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;
}

屬性

onChange返回值detail.source

source字段表示產(chǎn)生移動的原因

說明：冒泡事件，請查看 事件介紹 中的 事件類型。