关于app:AVM-拖动组件-movableview-介绍

利用开发中拖动性能是比拟常见的 ，如滑动解锁，滑动验证码，实现一些小游戏，少儿编程中常见。

avm.js 是多端开发框架，一套代码可同时编译为APP 、小程序、h5。

avm 框架中实现拖动性能非常简单，先应用 movable-view 标签定义一个可挪动区域，并指定宽高，代码如下：

<template>
    <view class="page">
        <movable-area class="movable-area"></movable-area>
    </view>
</template>
<script>
    export default {
        name: 'test3',
        apiready(){//like created

        },
        data() {
            return{

            }
        },
        methods: {

        }
    }
</script>
<style>
    .page {
        height: 100%;
    }

    .movable-area {
        width: 200px;
        height: 200px;
        background-color: #c4bfbf;
    }
</style>

再应用 movable-view 标签定义一个可挪动区域，指定宽高，代码如下：

<template>
    <view class="page">
        <safe-area>
            <movable-area class="movable-area">
                <movable-view class="movable-view"></movable-view>
            </movable-area>
        </safe-area>
    </view>
</template>
<script>
export default {
    name: 'test3',
    apiready() {//like created

    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>
<style>
.page {
    height: 100%;
}

.movable-area {
    width: 200px;
    height: 200px;
    background-color: #c4bfbf;
}

.movable-view {
    height: 50px;
    width: 50px;
    background-color: #e0a9a9;
}
</style>

此时，咱们运行代码，发现滑块还是不可拖动的。咱们须要在 movable-view 上增加一个属性 direction；

direction="horizontal"

direction 属性指定滑块的挪动方向，取值范畴： all、vertical、horizontal、none；默认值none；

上面看一个简略的滑动验证的示例：

效果图：

实现代码：

<template>
    <safe-area>
        <scroll-view class="body">
            <view class="section">
                <movable-area class="movable-area">
                    <movable-view class="movable-view" direction="horizontal" onchange={this.onChange}>
                        <text>青</text>
                    </movable-view>
                </movable-area>
                <text v-if="this.data.isok" class="section-title">验证通过</text>
            </view>
        </scroll-view>
    </safe-area>
</template>
<script>
export default {
    name: 'test',
    data() {
        return {
            x: 0,
            y: 0,
            "isok": false
        }
    },
    methods: {

        onChange(e) {
            console.log(JSON.stringify(e.detail))
            if (124 < e.detail.x && e.detail.x < 135) {
                this.data.isok = true;
            }
        },
    }
}
</script>
<style>
.body {
    width: 100%;
    height: 100%;
}
.movable-area {
    height: 50px;
    width: 200px;
    margin: 0 0 0 50px;
    background-color: #ccc;
    overflow: hidden;
    background-image: url(../image/bg1.png);
}
.movable-view {
    margin-top: 12px;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    background: #e6f7e6;
}
text {
    font-size: 16px;
}

</style>

通过 onchange 事件可获取滑块滑动时返回的地位信息，通过判断滑块的x坐标达到指标区间内，则提醒验证胜利。

| onchange | eventhandle |   | 否 | 拖动过程中触发的事件，event.detail = {x, y, source} |

 还有很多属性，可查看官网文档学习：