百度智能小程序 可移动视图容器

movable-view 可移动视图容器

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

属性说明

direction 有效值

示例 

在开发者工具中打开

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

<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>

Page({
    data: {
        x1: 30,
        y1: 30,
    },
    move() {
        this.setData({
            x1: 50,
            y1: 50
        })
    }
});

代码示例 2：movable-view 区域大于 movable-area<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>

Page({
    data: {
        x: 30,
        y: 30
    },
});

movable-area {
    width: 3.88rem;
    height: 2.18rem;
    background-color: #fff;
    overflow: hidden;
    margin: 0;
    border-radius: .05rem;
}

movable-view {

    background-color: #5B9FFF;
    color: #fff;
    border-radius: .05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


.bigger-area {
    width: 4.8rem;
    height: 2.8rem;
}

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

<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>

Page({
    data: {
        x: 30,
        y: 30
    },
});

代码示例 4：只可以纵向移动<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>

Page({
    data: {
        x: 30,
        y: 30
    },
});

代码示例 5： 可超出边界<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>

Page({
    data: {
        x: 30,
        y: 30
    },
});

代码示例 6： 带有惯性

<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>

Page({
    data: {
        x: 30,
        y: 30
    },
});

代码示例 7： 可放缩

<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>

Page({
    data: {
        x: 30,
        y: 30,
        scale: 1
    },
    move() {
        this.setData({
            x1: 50,
            y1: 50
        })
    },
    scale() {
        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。
• Tip：当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内。
• Tip：当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）。
• Tip：movable-view 必须在组件中，并且必须是直接子节点，否则不能移动。

参考示例

参考示例 1：可悬浮菜单

在开发者工具中打开

<view class="wrap">
    <movable-area style="height: {{height}}px; width: {{width}}px; background-color: #f5f5f5">
        <movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4">
              菜单
        </movable-view>
    </movable-area>
</view>

Page({
    data: {
        x: 30,
        y: 30,
    },
    onShow() {
        swan.getSystemInfo({
            success: res => {
                console.log('getSystemInfo success', res);
                this.setData({
                    'width': res.windowWidth,
                    'height': res.windowHeight
                });
            },
            fail: err => {
                console.log('getSystemInfo fail', err);
            }
        });
    }
});