开发
API

movable-area

基础库 2.25.0 开始支持本组件。

movable-view 的可移动区域。

属性说明

Object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
scale-areabooleanfalse当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area2.25.0

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title first"
        >movable-view区域小于movable-area</view
      >
      <movable-area>
        <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
      </movable-area>
    </view>
    <view class="btn-area">
      <button bindtap="tap" class="page-body-button" type="primary">
        点击移动到 (30px, 30px)
      </button>
    </view>

    <view class="page-section">
      <view class="page-section-title">movable-view区域大于movable-area</view>
      <movable-area>
        <movable-view class="max" direction="all">text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">只可以横向移动</view>
      <movable-area>
        <movable-view direction="horizontal">text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">只可以纵向移动</view>
      <movable-area>
        <movable-view direction="vertical">text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">可超出边界</view>
      <movable-area>
        <movable-view direction="all" out-of-bounds>text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">带有惯性</view>
      <movable-area>
        <movable-view direction="all" inertia>text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">可放缩</view>
      <movable-area scale-area>
        <movable-view
          direction="all"
          bindchange="onChange"
          bindscale="onScale"
          scale
          scale-min="0.5"
          scale-max="4"
          scale-value="{{scale}}"
          >text</movable-view
        >
      </movable-area>
    </view>

    <view class="btn-area">
      <button bindtap="tap2" class="page-body-button" type="primary">
        点击放大3倍
      </button>
    </view>
  </view>
</view>
Page({
  data: {
    x: 0,
    y: 0,
    scale: 2,
  },

  tap() {
    this.setData({
      x: 30,
      y: 30,
    });
  },

  tap2() {
    this.setData({
      scale: 3,
    });
  },

  onChange(e) {
    console.log(e.detail);
  },

  onScale(e) {
    console.log(e.detail);
  },
});

Bug & Tip

  • Tip: movable-area 必须设置 width 和 height 属性,不设置默认为 10px
  • Tip: 当 movable-view 小于 movable-area 时,movable-view 的移动范围是在 movable-area 内;
  • Tip: 当 movable-view 大于 movable-area 时,movable-view 的移动范围必须包含 movable-area(x 轴方向和 y 轴方向分开考虑)
点击纠错
评价此篇文档