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

缩放

 效果图：

.js

// pages/demo/demo.js
Page({

    data: {
        scale: 0,
    },

    onChange(e) {
        console.log(e.detail)
    },

    onScale(e) {
        console.log(e.detail)
    },
    //放大 
    enlargeBtn: function () {
        this.setData( {
            scale: this.data.scale + 1
        })

    },
    //缩小
    narrowBtn: function () {
        this.setData( {
            scale: this.data.scale - 1
        })
    }
})

.wxml

<!--pages/demo/demo.wxml-->
<movable-area class="myMovableStyle">
    <movable-view class="myMvableView" x="{{x}}" y="{{y}}" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}">movableView</movable-view>
</movable-area>

<view class="myButtonParentView">
    <button bindtap="enlargeBtn" class="myButton">放大</button>
    <button bindtap="narrowBtn" class="myButton">缩小</button>
</view>

.wxss

/* pages/demo/demo.wxss */
.myMovableStyle {
    /* position属性用于指定一个元素在文档中的定位方式,因为这里设置了absolute 才让宽度与高度的百分比有功能 */
    position: absolute;
    background-color: cyan;
    width: 100%;
    height: 100%;
}

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

.myButtonParentView {
    display: flex;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 100rpx;
}

/* 指定某个child view的风格 */
.myButtonParentView button:nth-child(1) {
    display: flex;
    /* align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。 */
    align-items: center;
    /* justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。 */
    justify-content: center;
    background-color: lightskyblue;
    color: tomato;
}

.myButtonParentView button:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightgreen;
    color: tomato;
}

 

 

 

 

End