开发
API

movable-view

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

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

属性说明

Object 类型,属性如下:

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

bindchange 返回的 source 表示产生移动的原因

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

扫码体验

请使用字节宿主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-view 必须设置 width 和 height 属性,不设置默认为 10px
  • Tip:movable-view 默认为绝对定位,top 和 left 属性为 0px
点击纠错
评价此篇文档