movable-area
组件和movable-view
组件组合使用,可以实现类似动画效果。
movable-area给movable-view划定一个可移动的区域
,movable-view是一个可移动的容器
,它可以在movable-area划定的区域内拖拽滑动
,需要保证movable-view在movable-area组件内部,并且必须是直接子节点
。
直白点说,movable-view作为movable-area的直接子节点
时,可以在movable-area规定的范围内拖拽滑动
、缩小放大
。
movable-view的属性、方法
属性
direction
:设置movable-view的可移动方向
,属性值有all(允许任意方向移动)、vertical(只允许纵向移动)、horizontal(只允许横向移动)、none(不允许移动)。
inertia
:movable-view移动时是否带有惯性
(就是拖动中松开手之后是否会继续滑动一段距离),默认值false,不滑动。
friction
:摩擦系数,惯性滑动时,friction值越大滑动停止的越快
,可以类比物理中的摩擦系数,摩檫系数越大,滑动摩擦力越大,滑动物体停止的越快。(friction的值必须设置一个大于0的数,否则会默认为2)
out-of-bounds
:movable-view拖动是否可以超出movable-area规定的区域
,默认值false,不可超出规定区域,如果属性值设置为true,movable-view可以被拖拽出规定区域一段距离,但是松开手之后movable-view会自动弹回规定区域
。
damping
:阻尼系数
,控制movable-view在可移动范围内位置改变
和过节回弹
时的变动速度,默认值为20,值越大速度越快
。
disabled
:是否禁用
animation
:是否使用动画
方法
bindchange
:拖动过程中movable-view坐标位置变动时触发的事件
htouchmove
:事件处理函数,初次手指触摸后横向移动时触发,会同时捕获到touchmove事件
vtouchmove
:事件处理函数,初次手指触摸后纵向移动时触发,会同时捕获到touchmove事件
movable-view的双指缩放功能
scale
属性设置movable-view是否支持双指缩放
,当scale属性的值为true时,movable-view支持双指缩放,但是这时候只有当两个手指触点都在movable-view范围内
时,才能对这个movable-view进行缩小放大操作。
扩大双指缩放的默认范围
当movable-view面积很小,无法容纳两个手指进行缩放操作时,我们期望把缩放手势的生效区域扩大,这时候可以在movable-area组件
上设置scale-area
属性,这个属性默认值为false,我们可以在movable-area中设置为true
,这时候双指缩放的有效区域就扩大到了整个movable-area范围。
设置缩放倍数
scale-min
:定义movable-view允许的最小缩放倍数,默认值为0.5
scale-max
:定义movable-view允许的最大缩放倍数,默认值为10
scale-value
:定义缩放倍数,默认值为1,允许设置的值为0.5-10
缩放时触发的事件
bindscale
:在movable-view组件上绑定bindscale事件,双指缩放时触发
movable-view在movable-area中的位置
movable-view组件默认为绝对定位,且top和left属性值为0px
,所以如果没有特备设置的话,movable-view的初始位置位于movable-area的左上角。
可以通过movable-view的x
和y
属性设置movable-view在x轴和y轴上的偏移量
。改变x或者y的值会触发移动,这两个属性值的单位支持px(默认)、rpx。
一个简单的小例子
<movable-area class="area">
<movable-view class="view" direction="all" inertia="true" out-of-bounds="true" x="{{v1.x}}" y="{{v1.y}}" damping="10" bindchange="change">
1
</movable-view>
<movable-view class="view2" direction="all" inertia="true" out-of-bounds="true" x="{{v2.x}}" y="{{v2.y}}" damping="10" bindchange="change">
2
</movable-view>
<movable-view class="view3" direction="all" inertia="true" out-of-bounds="true" x="{{v3.x}}" y="{{v3.y}}" damping="10" bindchange="change">
3
</movable-view>
</movable-area>
<button type="primary" bindtap="tap" style="width: 100%;margin-top:0px;">点击排序</button>
.area {
background-color: aqua;
width: 750rpx;
height: 300px;
}
.view {
background-color: bisque;
width: 30px;
height: 30px;
}
.view2 {
background-color: rgb(240, 9, 86);
width: 30px;
height: 30px;
}
.view3 {
background-color: rgb(22, 216, 109);
width: 30px;
height: 30px;
}
Page({
data: {
v1:{
x:100,
y:100
},
v2:{
x:0,
y:0
},
v3:{
x:330,
Y:10
}
},
onLoad() {
},
change(event){
console.log(event);
},
tap(){
this.setData({
v1:{
x:0,
y:0
},
v2:{
x:30,
y:0
},
v3:{
x:60,
y:0
}
});
}
})