movable-view 可移动视图容器

跳转编辑工具

在开发者工具中打开

扫码体验

代码示例

请使用百度APP扫码

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

• SWAN
• JS

代码示例 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-area>
    </view>
</view>

• SWAN
• JS

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

• SWAN
• JS

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

代码示例 5：可超出边界

• SWAN
• JS

• SWAN
• JS

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

代码示例 7：可放缩

• SWAN
• JS

代码示例 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>
</view>

• 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 必须在组件中，并且必须是直接子节点，否则不能移动。