movable-view 可移动视图容器

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		否	定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画
y	Number		否	定义 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	否	是否使用动画
bindchange	EventHandle		否	拖动过程中触发的事件，`event.detail = {x: x, y: y, source: source}`，其中 source 表示产生移动的原因，值可为 touch（拖动）
bindscale	EventHandle		否	缩放过程中触发的事件，`event.detail = {x: x, y: y, scale: scale}`
htouchmove	EventHandle		否	手指初次触摸后发生横向移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch
vtouchmove	EventHandle		否	手指初次触摸后发生纵向移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch

direction 有效值

值	说明
all	水平方向和垂直方向
vertical	垂直方向
horizontal	水平方向
none	不可移动

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：movable-view 区域小于 movable-area

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            movable-view区域小于movable-area
        </view>
        <movable-area>
            <movable-view x="{=x1=}" y="{=y1=}" damping="20" disabled="false" direction="all">text</movable-view>
        </movable-area> 
        <button bind:tap="move" class="move-button" type="primary">点击移动到 (50px, 50px)</button>
    </view>
</view>

代码示例 2：movable-view 区域大于 movable-area

SWAN
JS
CSS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            movable-view区域大于movable-area
        </view>
        <movable-area>
            <!-- 添加大于movable-area的class -->
            <movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>
        </movable-area>
    </view>
</view>

代码示例 3：只可以横向移动

SWAN
JS

<view class="card-area">
    <view class="top-description border-bottom">
        只可以横向移动
    </view>
    <movable-area htouchmove>
        <movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>
    </movable-area>
</view>

代码示例 4：只可以纵向移动

SWAN
JS

<view class="card-area">
    <view class="top-description border-bottom">
        只可以纵向移动
    </view>
    <movable-area vtouchmove>
        <movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>
    </movable-area>
</view>

代码示例 5：可超出边界

SWAN
JS

<view class="wrap">
   <view class="card-area">
        <view class="top-description border-bottom">
            可超出边界
        </view>
        <movable-area>
            <movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>
        </movable-area>
    </view>
</view>

代码示例 6：带有惯性

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            带有惯性
        </view>
        <movable-area>
            <movable-view x="{=x=}" y="{=y=}" direction="all" inertia friction="0.5">text</movable-view>
        </movable-area>
    </view>
</view>

代码示例 7：可放缩

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            可放缩
        </view>
        <movable-area scale-area="true">
            <movable-view 
                x="{=x=}" 
                y="{=y=}" 
                scale
                scale-min="0.5"
                scale-max="4"
                scale-value="{{scale}}"
                direction="all" 
                animation="false" 
                bindchange="onChange" 
                bindscale="onScale">
               text
            </movable-view>
        </movable-area>
        <button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>
    </view>
</view>

代码示例 8：可悬浮菜单

SWAN
JS

<view class="wrap">
    <movable-area class="movable-area"  style="height:{{height/100}}rem">
        <movable-view
            x="0"
            y="0"
            direction="all"
            animation="false"
            scale
            scale-min="0.5"
            scale-max="4">
        </movable-view>
    </movable-area>
</view>

Bug & Tip

Tip：movable-view 需要在 CSS 中设置 width 和 height 属性；若不设置，默认为 10px 。
Tip：movable-view 默认为绝对定位，top 和 left 属性为 0px 。
Tip：当 movable-view 的范围小于 movable-area 时，movable-view 的移动范围是在 movable-area 内。
Tip：当 movable-view 的范围大于 movable-area 时，movable-view 的移动范围必须在 movable-area 内（x 轴方向和 y 轴方向分开考虑）。
Tip：movable-view 必须在组件中，并且必须是直接子节点，否则不能移动。