在小程序中,拖拽的实现已经组件化了,可以用<movable-area>和<movable-view>这对父子标签来实现,当然也可以原生js去实现。这里切说一说我如何用这对父子标签实现的拖拽功能:
目录
一、了解<movable-area>和<movable-view>这对父子标签
一、了解<movable-area>和<movable-view>这对父子标签
1、movable-area标签
(1)、属性
- scale-area boolean 类型 当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area,默认是“将缩放手势生效区域修改为整个movable-area”。
(2)、注意事项
- movable-area 必须设置width和height属性,不设置默认为10px;
- 当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;
- 当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑);
2、movable-view标签
(1)、属性
- disabled boolean 是否禁用,默认是“禁用”;
- inertia boolean movable-view是否带有惯性,默认是“带有惯性”;
- out-of-bounds boolean 是否允许movable-view超出movable-area,默认是“允许超出movable-area”;
- scale boolean 是否支持双指缩放,默认是“缩放手势生效区域是在movable-view内”;
- animation boolean 是否使用动画,默认是“支持动画”。
(2)、别的属性官网给的解释还是很好理解的:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
direction | string | none | 否 | movable-view的移动方向,属性值有all、vertical、horizontal、none |
x | number | 否 | 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 | |
y | number | 否 | 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 | |
damping | number | 20 | 否 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 |
friction | number | 2 | 否 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 |
scale-min | number | 0.5 | 否 | 定义缩放倍数最小值 |
scale-max | number | 10 | 否 | 定义缩放倍数最大值 |
scale-value | number | 1 | 否 | 定义缩放倍数,取值范围为 0.5 - 10 |
bindchange | eventhandle | 否 | 拖动过程中触发的事件,event.detail = {x, y, source} | |
bindscale | eventhandle | 否 | 缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持 | |
htouchmove | eventhandle | 否 | 初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch | |
vtouchmove | eventhandle | 否 | 初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch |
(3)、bindchange 方法返回值中的source表示:产生移动的原因。原因种类如下:
值 | 说明 |
---|---|
touch | 拖动 |
touch-out-of-bounds | 超出移动范围 |
out-of-bounds | 超出移动范围后的回弹 |
friction | 惯性 |
空字符串 | setData |
(4)、注意事项
- movable-view 必须设置width和height属性,不设置默认为10px
- movable-view 默认为绝对定位,top和left属性为0px
二、 案例
//index.wxml
<view>
<movable-area class="move_w" scale-area>
<movable-view class="move_b" direction="all" x="10" y="10" damping="20" friction="2"
scale-min="0.5" scale-max="10" scale-value="1"
inertia out-of-bounds scale animation
bindchange="moveEvent">
<view class="advertisement_title">薛之谦同款</view>
<view class="advertisement_content">
......
</view>
</movable-view>
<view>love</view>
</movable-area>
</view>
// index.js
Page({
data:{},
moveEvent: function(e){
console.log("让我们一起摇摆~" + JSON.stringify(e.detail));
}
})
控制台输出:
随着小程序的发展,不知道以后这个功能会怎样呢……