百度智能小程序 可移動(dòng)視圖容器

movable-view 可移動(dòng)視圖容器

解釋?zhuān)嚎梢苿?dòng)的視圖容器，在頁(yè)面中可以拖拽滑動(dòng)。movable-view 必須在 movable-area 組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)。

屬性說(shuō)明

direction 有效值

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例 1： movable-view 區(qū)域小于 movable-area

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            movable-view區(qū)域小于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">點(diǎn)擊移動(dòng)到 (50px, 50px)</button>
    </view>
</view>

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

代碼示例 2：movable-view 區(qū)域大于 movable-area<view class="wrap">

    <view class="card-area">
        <view class="top-description border-bottom">
            movable-view區(qū)域大于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：只可以橫向移動(dòng)

<view class="card-area">
    <view class="top-description border-bottom">
        只可以橫向移動(dòng)
    </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：只可以縱向移動(dòng)<view class="card-area">

    <view class="top-description border-bottom">
        只可以縱向移動(dòng)
    </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">點(diǎn)擊放大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 必須設(shè)置 width 和 height 屬性，不設(shè)置默認(rèn)為 10px。
• Tip：movable-view 默認(rèn)為絕對(duì)定位，top 和 left 屬性為 0px。
• Tip：當(dāng) movable-view 小于 movable-area 時(shí)，movable-view 的移動(dòng)范圍是在 movable-area 內(nèi)。
• Tip：當(dāng) movable-view 大于 movable-area 時(shí)，movable-view 的移動(dòng)范圍必須包含 movable-area（x 軸方向和 y 軸方向分開(kāi)考慮）。
• Tip：movable-view 必須在組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)。

參考示例

參考示例 1：可懸浮菜單

在開(kāi)發(fā)者工具中打開(kāi)

<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);
            }
        });
    }
});