关于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} |

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