MovableView 可移动的视图容器 
V1.9.8+
概述
MovableView 可移动的视图容器，在页面中可以拖拽滑动，暂不支持缩放。
特别说明
- 组件为 fixed 布局，将组件放置最外层容器下，默认可在当前屏幕内移动。
- 如果组件无法满足需求，可使用官方组件 movable-view (opens new window)。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
- 一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiMovableView from "@/components/firstui/fui-movable-view/fui-movable-view.vue"
export default {
components:{
fuiMovableView
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 @change 事件返回组件当前x轴、y轴偏移距离。
<fui-movable-view @change="change">
<view class="fui-fab--box">
<fui-icon name="edit" color="#fff"></fui-icon>
</view>
</fui-movable-view>
1
2
3
4
5
2
3
4
5
.fui-fab--box{
width: 108rpx;
height: 108rpx;
border-radius: 50%;
background: #465CFF;
display: flex;
align-items: center;
justify-content: center;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
设置显示位置（顶部）
通过 top 属性设置组件top值。
<fui-movable-view top="200">
<view class="fui-fab--box">
<fui-icon name="share" color="#fff"></fui-icon>
</view>
</fui-movable-view>
1
2
3
4
5
2
3
4
5
/* 样式同上 */
1
# Slots
| 名称 | 说明 |
|---|---|
| default | 容器内显示内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| left | Number, String | left值，设置大于-1的值生效，且 right 属性失效，单位rpx | -1 | - |
| right | Number, String | right值，单位rpx | 80 | - |
| top | Number, String | top值，设置大于-1的值生效，且 bottom 属性失效，单位rpx | -1 | - |
| bottom | Number, String | bottom值，单位rpx | 120 | - |
| zIndex | Number, String | z-index 层级值 | 10 | Nvue端不支持，默认越靠后的元素层级越高 |
| direction | String | 移动方向，可选值：all、vertical、horizontal、none | all | - |
// 属性 direction 值说明
all：可在任意方向拖拽移动
vertical：仅可在垂直方向移动
horizontal：仅可在水平方向移动
none：不可移动
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 初始化和元素移动时触发的事件 | { x:x轴的偏移距离，px y:y轴的偏移距离，px } |
# Methods
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| reset | 重新初始化组件信息，当位置初始化有误时可调用此方法纠正 | - | - |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。