AVM drag component movable-view introduction

The drag function in application development is relatively common, such as sliding to unlock, sliding verification code, and implementing some small games, which are common in children's programming.

avm.js is a multi-terminal development framework, a set of code can be compiled into APP, applet, h5 at the same time.

It is very simple to implement the drag function in the avm framework. First, use the movable-view tag to define a movable area, and specify the width and height. The code is as follows:

 <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>

Then use the movable-view tag to define a movable area, specify the width and height, and the code is as follows:

 <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>

At this point, we run the code and find that the slider is still not draggable. We need to add a property direction to movable-view;

 direction="horizontal"

The direction property specifies the moving direction of the slider, the range of values: all, vertical, horizontal, none; the default value is none;

Let's see an example of a simple swipe validation:

Effect picture:

Implementation code:

 <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>

The position information returned when the slider slides can be obtained through the onchange event, and the verification is successful by judging that the x coordinate of the slider reaches the target interval.

| onchange | eventhandle | | no | event triggered during dragging, event.detail = {x, y, source} |

There are many more properties, you can check the official documentation to learn:

property name	type	Defaults	Required	illustrate
direction	string	none	no	The moving direction of movable-view, the attribute values are all, vertical, horizontal, none
inertia	boolean	false	no	Whether movable-view has inertia
out-of-bounds	boolean	false	no	After the movable area is exceeded, can the movable-view still move?
x	number		no	Define the offset in the x-axis direction. If the value of x is not within the movable range, it will automatically move to the movable range. Changing the value of x will trigger the animation
y	number		no	Define the offset in the y-axis direction. If the value of y is not within the movable range, it will automatically move to the movable range. Changing the value of y will trigger the animation
damping	number	20	no	Damping coefficient, used to control the animation when x or y changes and the animation of rebounding out of bounds, the larger the value, the faster the movement
friction	number	2	no	Friction coefficient, used to control the animation of inertial sliding, the larger the value, the greater the friction force, and the faster the sliding stops; it must be greater than 0, otherwise it will be set to the default value
disabled	boolean	false	no	whether to disable
scale	boolean	false	no	Whether to support pinch zoom, the default zoom gesture effective area is in movable-view
scale-min	number	0.5	no	Define the minimum zoom factor
scale-max	number	10	no	Define the maximum zoom factor
scale-value	number	1	no	Define the zoom factor, the value range is 0.5 - 10
animation	boolean	true	no	Whether to use animation
onchange	eventhandle		no	Event triggered during dragging, event.detail = {x, y, source}
onscale	eventhandle		no	Event triggered during scaling, event.detail = {x, y, scale}
onhtouchmove	eventhandle		no	Triggered when the movement is horizontal after the first finger touch
onvtouchmove	eventhandle		no	Triggered when the movement is vertical after the first finger touch