当前位置: 首页 > Web前端 > HTML

AVM拖拽组件movable-view简介

时间:2023-03-28 19:58:03 HTML

拖拽功能在应用开发中比较常见,比如滑动解锁,滑动验证码,实现一些小游戏,在少儿编程中比较常见。avm.js是一个多端开发框架,一套代码可以同时编译成APP、小程序、h5。在avm框架中实现拖拽功能非常简单。首先,使用movable-view标签定义一个可移动区域,并指定宽度和高度。代码如下::'test3',apiready(){//likecreated},data(){return{}},方法:{}}然后使用movable-view标签定义一个可移动区域,指定宽度和高度,代码如下:<script>exportdefault{name:'test3',apiready(){//likecreated},data(){return{}},methods:{}}this当我们运行代码时,我们发现滑块仍然不可拖动我们需要给movable-view添加一个属性direction;direction="horizo??ntal"方向属性指定滑块的移动方向,取值范围:all、vertical、horizo??ntal、none;默认值为无;下面看一个简单的滑动验证例子:效果图:实现代码:通过onchange事件可以获取滑块滑动时返回的位置信息,通过判断滑块的x坐标可以到达目标范围,会提示验证成功|改变|事件句柄||没有|拖动过程中触发的事件,event.detail={x,y,source}|其他属性还有很多,可以查看官方文档了解:属性名类型默认值必填,directionStringnone是movable-视图的移动方向,属性值是all,vertical,horizo??ntal,noneertiabooleanfalsenomovable-view是否有惯性越界booleanfalsenomovable-view超出可移动区域后是否可以移动xnumber到可移动范围内,改变x的值会触发动画y的值会触发动画dampingnumber20无阻尼系数,用于控制x或y变化时的动画和越界回弹的动画,值越大,移动越快frictionnumber2无摩擦系数,用于控制惯性滑动的动画,值越大,摩擦越大,滑动停止的越快;必须大于0,否则设置为默认值disabledbooleanfalse否是否禁用scalebooleanfalse否是否支持双指缩放,默认缩放手势有效区域为movable-scale-minnumber0.5inviewno定义最小缩放factorscale-maxnumber10no定义最大缩放因子scale-valuenumber1no定义缩放因子,取值范围0.5-10animationbooleantrueno是否使用动画onchangeeventthandle拖动时不触发事件,event.detail={x,y,source}onscaleeventhandle缩放过程中没有事件触发,event.detail={x,y,scale}onhtouchmoveventhandle没有Onvtouchmoveventhandle在初始手指触摸后移动为水平时触发没有初始手指触摸当返回移动为垂直移动时触发