共计 2828 个字符,预计需要花费 8 分钟才能阅读完成。
利用开发中拖动性能是比拟常见的,如滑动解锁,滑动验证码,实现一些小游戏,少儿编程中常见。
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} |
还有很多属性,可查看官网文档学习:
属性名称 | 类型 | 默认值 | 必填 | 阐明 |
---|---|---|---|---|
direction | string | none | 否 | movable-view 的挪动方向,属性值有 all、vertical、horizontal、none |
inertia | boolean | false | 否 | movable-view 是否带有惯性 |
out-of-bounds | boolean | false | 否 | 超过可挪动区域后,movable-view 是否还能够挪动 |
x | number | 否 | 定义 x 轴方向的偏移,如果 x 的值不在可挪动范畴内,会主动挪动到可挪动范畴,扭转 x 的值会触发动画 | |
y | number | 否 | 定义 y 轴方向的偏移,如果 y 的值不在可挪动范畴内,会主动挪动到可挪动范畴,扭转 y 的值会触发动画 | |
damping | number | 20 | 否 | 阻尼系数,用于管制 x 或 y 扭转时的动画和过界回弹的动画,值越大挪动越快 |
friction | number | 2 | 否 | 摩擦系数,用于管制惯性滑动的动画,值越大摩擦力越大,滑动越快进行;必须大于 0,否则会被设置成默认值 |
disabled | boolean | false | 否 | 是否禁用 |
scale | boolean | false | 否 | 是否反对双指缩放,默认缩放手势失效区域是在 movable-view 内 |
scale-min | number | 0.5 | 否 | 定义缩放倍数最小值 |
scale-max | number | 10 | 否 | 定义缩放倍数最大值 |
scale-value | number | 1 | 否 | 定义缩放倍数,取值范畴为 0.5 – 10 |
animation | boolean | true | 否 | 是否应用动画 |
onchange | eventhandle | 否 | 拖动过程中触发的事件,event.detail = {x, y, source} | |
onscale | eventhandle | 否 | 缩放过程中触发的事件,event.detail = {x, y, scale} | |
onhtouchmove | eventhandle | 否 | 首次手指触摸后挪动为横向的挪动时触发 | |
onvtouchmove | eventhandle | 否 | 首次手指触摸后挪动为纵向的挪动时触发 |
正文完