APP开发平台 > Blog > APICloud AVM框架拖动组件 movable-view 介绍

应用开发中拖动功能是比较常见的 ,如滑动解锁,滑动验证码,实现一些小游戏,少儿编程中常见。

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

 还有很多属性,可查看官方文档学习:

属性名称类型默认值必填说明
directionstringnonemovable-view 的移动方向,属性值有 all、vertical、horizontal、none
inertiabooleanfalsemovable-view 是否带有惯性
out-of-boundsbooleanfalse超过可移动区域后,movable-view 是否还可以移动
xnumber 定义 x 轴方向的偏移,如果 x 的值不在可移动范围内,会自动移动到可移动范围,改变 x 的值会触发动画
ynumber 定义 y 轴方向的偏移,如果 y 的值不在可移动范围内,会自动移动到可移动范围,改变 y 的值会触发动画
dampingnumber20阻尼系数,用于控制 x 或 y 改变时的动画和过界回弹的动画,值越大移动越快
frictionnumber2摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于 0,否则会被设置成默认值
disabledbooleanfalse是否禁用
scalebooleanfalse是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内
scale-minnumber0.5定义缩放倍数最小值
scale-maxnumber10定义缩放倍数最大值
scale-valuenumber1定义缩放倍数,取值范围为 0.5 - 10
animationbooleantrue是否使用动画
onchangeeventhandle 拖动过程中触发的事件,event.detail = {x, y, source}
onscaleeventhandle 缩放过程中触发的事件,event.detail = {x, y, scale}
onhtouchmoveeventhandle 初次手指触摸后移动为横向的移动时触发
onvtouchmoveeventhandle 初次手指触摸后移动为纵向的移动时触发


2022-09-30 来源:APICloud

AVM框架 movable-view

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements