原生小程序开发组件｜视图容器组件汇总（三）

movable-area

movable-view 的可移动区域。

属性说明

属性	类型	默认值	必填	说明
scale-area	boolean	false	否	当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area

示例代码

TYML

<view class="page-section">
  <view class="page-section-title l-r-padding">movable移动功能</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" x="{{x}}" y="{{y}}" direction="all">
        text
      </movable-view>
    </movable-area>
  </view>
  <view class="btn-wrap">
    <view class="btn-line">
      <button type="primary" bind:tap="moveFn" class="btn">点击移动到(30px, 30px)</button>
    </view>
    <view class="btn-line">
      <button type="primary" bind:tap="moveStep" class="btn sec-btn">点击移动到({{x + 10}}px, {{y + 10}}px)</button>
    </view>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">只可以横向移动</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" direction="horizontal">text</movable-view>
    </movable-area>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">只可以纵向移动</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" direction="vertical">text</movable-view>
    </movable-area>
  </view>
</view>
 
<view class="page-section">
  <view class="page-section-title l-r-padding">可超出边界</view>
  <view class="area-wrap">
    <movable-area class="area">
      <movable-view class="block" direction="all" out-of-bounds="true">text</movable-view>
    </movable-area>
  </view>
</view>

JS

Page({
  data: {
    x: 0,
    y: 0,
  },
  // 移动到30px,30px
  moveFn() {
    this.setData({
      x: 30,
      y: 30,
    });
  },
  moveStep() {
    const x = this.data.x + 10;
    const y = this.data.y + 10;
    this.setData({
      x,
      y,
    });
  },
});

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

TYSS

.page-section {
  width: 100%;
  margin-bottom: 30px;
}
 
.area-wrap {
  display: flex;
  justify-content: space-around;
}
 
.area {
  flex: none;
  height: 200px;
  width: 200px;
  margin: 10px;
  background-color: #ccc;
  overflow: hidden;
}
 
.block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  background: var(--ty-native-primary-color);
  color: #fff;
}
 
.btn-line {
  text-align: center;
}
 
.btn-line .btn {
  display: inline-block;
  width: 240px;
}
 
.btn-line .sec-btn {
  margin-top: 10px;
}

movable-view

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

属性说明

属性	类型	默认值	必填	说明
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 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围。改变 x 的值会触发动画
y	number	0	否	定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围。改变 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	true	否	是否使用动画
bind:change	eventhandle		否	拖动过程中触发的事件，event.detail = {x, y, source}
bind:scale	eventhandle		否	缩放过程中触发的事件，event.detail = {x, y, scale}

bind:change 返回的 source 表示产生移动的原因

值	说明
touch	拖动
touch-out-of-bounds	超出移动范围
out-of-bounds	超出移动范围后的回弹
friction	惯性
空字符串	setData

注意事项

tip: movable-view 必须设置 width 和 height 属性，不设置默认为 10px tip: movable-view 默认为绝对定位，top 和 left 属性为 0px

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。