百度智能小程序 可移动视图容器
movable-view 可移动视图容器
解释：可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | ||
|---|---|---|---|---|---|---|
|
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 |
否 |
是否使用动画 |
||
|
bindchange |
EventHandle |
否 |
拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中 source 表示产生移动的原因，值可为 touch（拖动）。 |
|||
|
bindscale |
EventHandle |
否 |
缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale} |
|||
|
htouchmove |
EventHandle |
否 |
手指初次触摸后发生横向移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch |
|||
|
vtouchmove |
EventHandle |
否 |
手指初次触摸后发生纵向移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch |
|||
direction 有效值
| 值 | 说明 |
|---|---|
|
all |
水平方向和垂直方向 |
|
vertical |
垂直方向 |
|
horizontal |
水平方向 |
|
none |
不可移动 |
示例
代码示例 1： movable-view 区域小于 movable-area
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
movable-view区域小于movable-area
</view>
<movable-area>
<movable-view x="{=x1=}" y="{=y1=}" damping="20" disabled="false" direction="all">text</movable-view>
</movable-area>
<button bind:tap="move" class="move-button" type="primary">点击移动到 (50px, 50px)</button>
</view>
</view>Page({
data: {
x1: 30,
y1: 30,
},
move() {
this.setData({
x1: 50,
y1: 50
})
}
});代码示例 2：movable-view 区域大于 movable-area<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
movable-view区域大于movable-area
</view>
<movable-area>
<!-- 添加大于movable-area的class -->
<movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>
</movable-area>
</view>
</view>Page({
data: {
x: 30,
y: 30
},
});movable-area {
width: 3.88rem;
height: 2.18rem;
background-color: #fff;
overflow: hidden;
margin: 0;
border-radius: .05rem;
}
movable-view {
background-color: #5B9FFF;
color: #fff;
border-radius: .05rem;
display: flex;
align-items: center;
justify-content: center;
}
.bigger-area {
width: 4.8rem;
height: 2.8rem;
}代码示例 3：只可以横向移动
<view class="card-area">
<view class="top-description border-bottom">
只可以横向移动
</view>
<movable-area htouchmove>
<movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>
</movable-area>
</view>Page({
data: {
x: 30,
y: 30
},
});代码示例 4：只可以纵向移动<view class="card-area">
<view class="top-description border-bottom">
只可以纵向移动
</view>
<movable-area vtouchmove>
<movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>
</movable-area>
</view>Page({
data: {
x: 30,
y: 30
},
});代码示例 5： 可超出边界<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
可超出边界
</view>
<movable-area>
<movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>
</movable-area>
</view>
</view>Page({
data: {
x: 30,
y: 30
},
});代码示例 6： 带有惯性
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
带有惯性
</view>
<movable-area>
<movable-view x="{=x=}" y="{=y=}" direction="all" inertia friction="0.5">text</movable-view>
</movable-area>
</view>
</view>Page({
data: {
x: 30,
y: 30
},
});代码示例 7： 可放缩
<view class="wrap">
<view class="card-area">
<view class="top-description border-bottom">
可放缩
</view>
<movable-area scale-area="true">
<movable-view
x="{=x=}"
y="{=y=}"
scale
scale-min="0.5"
scale-max="4"
scale-value="{{scale}}"
direction="all"
animation="false"
bindchange="onChange"
bindscale="onScale">
text
</movable-view>
</movable-area>
<button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>
</view>
</view>Page({
data: {
x: 30,
y: 30,
scale: 1
},
move() {
this.setData({
x1: 50,
y1: 50
})
},
scale() {
this.setData({
scale: 3
})
},
onChange(e) {
console.log(e.detail)
},
onScale(e) {
console.log(e.detail)
}
});Bug & Tip
- Tip：movable-view 必须设置 width 和 height 属性，不设置默认为 10px。
- Tip：movable-view 默认为绝对定位，top 和 left 属性为 0px。
- Tip：当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内。
- Tip：当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）。
- Tip：movable-view 必须在组件中，并且必须是直接子节点，否则不能移动。
参考示例
参考示例 1：可悬浮菜单
<view class="wrap">
<movable-area style="height: {{height}}px; width: {{width}}px; background-color: #f5f5f5">
<movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4">
菜单
</movable-view>
</movable-area>
</view>Page({
data: {
x: 30,
y: 30,
},
onShow() {
swan.getSystemInfo({
success: res => {
console.log('getSystemInfo success', res);
this.setData({
'width': res.windowWidth,
'height': res.windowHeight
});
},
fail: err => {
console.log('getSystemInfo fail', err);
}
});
}
});