小程序開發 組件-movable-area與movable-view-可移動的View

前言

　　此篇博客演示可以移動的View

 

全方向移動

效果圖

.js

Page({

    /**
     * 頁面的初始數據,這裏需要提供x和y2個數據
     */
    data: {
        x:0,
        y:0
    },
})

.wxml

    <movable-area class="myMovableStyle">
        <movable-view class="myMvableView" x="{{x}}" y="{{y}}" direction="all">movableView</movable-view>
    </movable-area>

.wxss

.myMovableStyle{
    /* position屬性用於指定一個元素在文檔中的定位方式,因爲這裏設置了absolute 才讓寬度與高度的百分比有功能 */
    position: absolute;
    background-color: cyan;
    width: 100%;
    height: 100%;
}

.myMvableView{
    position: absolute;
    background-color:darkblue;
    color: white;
    width: 200rpx;
    height: 200rpx;
}

限制橫豎方向移動

效果圖：

.wxml

關鍵修改direction

    <movable-area class="myMovableStyle">
        <!--direction方向設置爲橫向horizontal 豎向爲vertical  -->
        <movable-view class="myMvableView" x="{{x}}" y="{{y}}" direction="vertical">movableView</movable-view>
    </movable-area>

可超出邊界移動

效果圖：

.wxml

在movable-view裏增加out-of-bounds實現

    <movable-area class="myMovableStyle">
        <movable-view class="myMvableView" x="{{x}}" y="{{y}}" direction="all"  out-of-bounds>movableView</movable-view>
    </movable-area>

有慣性移動

效果圖：

 

.wxml

在movable-view裏增加inertia實現

    <movable-area class="myMovableStyle">
        <movable-view class="myMvableView" x="{{x}}" y="{{y}}" direction="all"  inertia>movableView</movable-view>
    </movable-area>

縮放

 

 

 

 

End