movable-view
可移动的视图容器，在页面中可以拖拽滑动
movable-view属性
注意：movable-view必须在组件中，并且必须是直接子节点，否则不能移动。
movable-area
movable-view 的可移动区域
注意：movable-area 必须设置width和height属性，不设置默认为10px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
例1：movable-view区域小于movable-area
效果展示:
<view class="pageView">
<view class="page_title">movable-view区域小于movable-area</view>
<!--
direction:all movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia:false movable-view是否带有惯性
out-of-bounds:false 超过可移动区域后，movable-view是否还可以移动
x:10 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y:10 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping:20 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction:2 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled:false 是否禁用 1.9.90
scale:false 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 1.9.90
scale-min:0.5 定义缩放倍数最小值 1.9.90
scale-max:10 定义缩放倍数最大值 1.9.90
scale-value:1 定义缩放倍数，取值范围为 0.5 - 10 1.9.90
animation:true 是否使用动画 2.1.0
bindchange 拖动过程中触发的事件， = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData） 1.9.90
bindscale 缩放过程中触发的事件， = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回
-->
<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
</movable-area>
</view>
<view class="btn">
<button bindtap="tap" class="page-body-button" type="primary">点击移动到坐标 (100px, 100px)</button>
</view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
.pageView{
width: 100%;
margin-bottom: 60rpx;
}
.page_title{
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
movable-area {
height: 600rpx;
width: 600rpx;
margin: 75rpx;
background-color: #ccc;
overflow: hidden;
}
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
background: #1AAD19;
color: #fff;
}
.btn{
margin-left: 75rpx;
margin-right: 75rpx;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
Page({
data: {
x: 0,
y: 0,
},
tap(e) {
({
x: 100,
y: 100
})
},
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
例2：横向移动/纵向移动
效果展示:
<view class="pageView">
<view class="page_title">只可以横向移动</view>
<movable-area>
<movable-view direction="horizontal">横向</movable-view>
</movable-area>
</view>
<view class="pageView">
<view class="page_title">只可以纵向移动</view>
<movable-area>
<movable-view direction="vertical">纵向</movable-view>
</movable-area>
</view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
.pageView{
width: 100%;
margin-bottom: 60rpx;
}
.page_title{
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
background: #1AAD19;
color: #fff;
}
movable-area {
height: 450rpx;
width: 450rpx;
margin: 50rpx;
background-color: #ccc;
overflow: hidden;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
例3：可超出边界/带有惯性
效果展示:
<view class="pageView">
<view class="page_title">可超出边界</view>
<movable-area>
<movable-view direction="all" out-of-bounds>text</movable-view>
</movable-area>
</view>
<view class="pageView">
<view class="page_title">带有惯性</view>
<movable-area>
<movable-view direction="all" inertia>text</movable-view>
</movable-area>
</view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
.pageView{
width: 100%;
margin-bottom: 60rpx;
}
.page_title{
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
background: #1AAD19;
color: #fff;
}
movable-area {
height: 450rpx;
width: 450rpx;
margin: 50rpx;
background-color: #ccc;
overflow: hidden;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26