一. movable-area
movable-view的可移动区域。
1. 属性说明
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scale-area | Boolean | false | 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area |
二. movalbe-view
可移动的视图容器，在页面中可以拖拽滑动
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| x | Number / String | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 | |
| y | Number / String | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 | |
| direction | String | none | movable-view的移动方向，属性值有all(横竖都可以移动)、vertical（只能纵向移动）、horizontal（只能横向移动）、none（不可移动） |
| inertia | Boolean | false | movable-view是否带有惯性 |
| out-of-bounds | Boolean | false | 超过可移动区域后，movable-view是否还可以移动 |
| damping | Number | 20 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 |
| friction | Number | 2 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 |
| disabled | Boolean | false | 是否禁用 (如果禁用，movable-view就不可移动了) |
| scale | Boolean | false | 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 |
| scale-min | Number | 0.5 | 定义缩放倍数最小值 |
| scale-max | Number | 10 | 定义缩放倍数最大值 |
| scale-value | Number | 1 | 定义缩放倍数，取值范围为 0.5 - 10 |
| bindchange | EventHandle | 拖动过程中触发的事件，event.detail | |
| bindscale | EventHandle | 缩放过程中触发的事件，event.detail |
2. 注意点
- movable-view必须设置width和height。不然就会默认为10px.
- movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动
- movable-view 默认为绝对定位，top和left属性为0px
- 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
- 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
三. 可运行的代码
- wxml
<view class='container'>
<view class="section_title_less"> movable-view区域小于movable-area </view>
<movable-area class="area_less" scale-area>
<movable-view class="view_less" direction="all" scale inertia out-of-bounds x="{{x}}" y="{{y}}" damping="1" friction="200" bindchange="change" bindscale="scale"></movable-view>
</movable-area>
<view class="section_title_more"> movable-view区域大于movable-area </view>
<movable-area class="area_more" scale-area>
<movable-view class="view_more" direction="all">
<text>可移动的view</text>
</movable-view>
</movable-area>
</view>
- wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.section_title_less {
font-size: 28rpx;
}
.area_less {
height: 200px;
width: 200px;
background-color: red;
}
.view_less {
height: 50px;
width: 50px;
background-color: yellow;
}
.section_title_more {
font-size: 28rpx;
margin-top: 50px;
}
.area_more {
height: 50px;
width: 50px;
background-color: red;
}
.view_more {
height: 200px;
width: 200px;
border-color: green;
border-width: 2px;
border
- js
Page({
/**
* 页面的初始数据
*/
data: {
x: "100px",
y: "10px"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
change: function (event) {
// console.log(event);
},
scale: function (event) {
// console.log(event);
},
vtouchmove: function (event) {
console.log("纵向");
},
htouchmove: function (event) {
console.log("横向");
}
})
