小程序开发 组件-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