uni-app视图容器之movable-view

一.简介

movable-view：可移动的视图容器，在页面中可以拖拽滑动。
movable-area：movable-view 的可移动区域，movable-view 的父级，必须设置width和height属性，不设置默认为10px。

二.属性说明

-area属性说明：

-view属性说明：

除了基本事件外，movable-view提供了两个特殊事件：

1. htouchmove：初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch。
2. vtouchmove：初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch。

注意事项：

1. movable-view 、movable-area都必须设置width和height属性，不设置默认为10px
2. movable-view 默认为绝对定位，top和left属性为0px
3. movable-view的移动范围是在movable-area内，如果movable-view的宽或高值比movable-area大，则只能在x或y放向移动，若都超过，则无法移动
4. movable-view必须在组件中，并且必须是直接子节点，否则不能移动

三.案例

1界面代码

<view>
	<movable-area class="area1">
		<movable-view :x="x" :y="y" direction="all" class="view1">左键点击可上下左右拖动</movable-view>
	</movable-area>
</view>

• 1
• 2
• 3
• 4
• 5

样式

.view1{
		width: 200px;
		height: 50px;
		background-color: yellow;
	}
.srcoll-view{
	white-space: nowrap;
	width: 750rpx;
	height: 50px;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

3.实现效果
初始状态：

上下移动：

我们在使用原生组件，比如map组件时，map会覆盖别的基础组件，遮挡住别的视图，出现在视图最顶层，这时候使用以下两种视图，就能做到覆盖该原生组件。
-view
覆盖在原生组件上的文本视图，可覆盖的原生组件：video、map，支持click事件。
-image
覆盖在原生组件上的图片视图,可覆盖的原生组件：、

• 5+App中 cover-view、cover-image 中不支持嵌套其它组件
• 5+App中暂不支持 cover-view、cover-image 组件之间的嵌套
• 其他小程序平台下，可以使用条件编译，完全按照其规范开发
• 在 video 组件中使用时，不支持在全屏模式下展示