• movable-view
  • movable-area

    movable-view

    可移动的视图容器，在页面中可以拖拽滑动

    属性名类型默认值说明最低版本
    directionStringnonemovable-view的移动方向，属性值有all、vertical、horizontal、none
    inertiaBooleanfalsemovable-view是否带有惯性
    out-of-boundsBooleanfalse超过可移动区域后，movable-view是否还可以移动
    xNumber / String定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
    yNumber / String定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
    dampingNumber20阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
    frictionNumber2摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
    disabledBooleanfalse是否禁用
    scaleBooleanfalse是否支持双指缩放，默认缩放手势生效区域是在movable-view内
    scale-minNumber0.5定义缩放倍数最小值
    scale-maxNumber10定义缩放倍数最大值
    scale-valueNumber1定义缩放倍数，取值范围为 0.5 - 10
    animationBooleantrue是否使用动画
    bindchangeEventHandle拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
    bindscaleEventHandle缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}

    除了基本事件外，movable-view提供了两个特殊事件

    类型触发条件最低版本
    htouchmove初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch
    vtouchmove初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch

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

    movable-view 默认为绝对定位，top和left属性为0px

    注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

    movable-area

    movable-view 的可移动区域

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

    注意：movable-area 必须设置width和height属性，不设置默认为10px

    当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；

    当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

    示例代码：

    1. <view class="section">
    2.   <view class="section__title">movable-view区域小于movable-area</view>
    3.   <movable-area style="height: 200px; width: 200px; background: red;">
    4.     <movable-view
    5.       style="height: 50px; width: 50px; background: blue;"
    6.       x="{{x}}"
    7.       y="{{y}}"
    8.       direction="all"
    9.     ></movable-view>
    10.   </movable-area>
    11.   <view class="btn-area">
    12.     <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
    13.   </view>
    14.   <view class="section__title">movable-view区域大于movable-area</view>
    15.   <movable-area style="height: 100px; width: 100px; background: red;">
    16.     <movable-view
    17.       style="height: 200px; width: 200px; background: blue;"
    18.       direction="all"
    19.     ></movable-view>
    20.   </movable-area>
    21.   <view class="section__title">可放缩</view>
    22.   <movable-area
    23.     style="height: 200px; width: 200px; background: red;"
    24.     scale-area
    25.   >
    26.     <movable-view
    27.       style="height: 50px; width: 50px; background: blue;"
    28.       direction="all"
    29.       bindchange="onChange"
    30.       bindscale="onScale"
    31.       scale
    32.       scale-min="0.5"
    33.       scale-max="4"
    34.       scale-value="2"
    35.     ></movable-view>
    36.   </movable-area>
    37. </view>
    1. Page({
    2.   data: {
    3.     x: 0,
    4.     y: 0
    5.   },
    6.   tap(e) {
    7.     this.setData({
    8.       x: 30,
    9.       y: 30
    10.     })
    11.   },
    12.   onChange(e) {
    13.     console.log(e.detail)
    14.   },
    15.   onScale(e) {
    16.     console.log(e.detail)
    17.   }
    18. })