uni-app视图容器之movable-view

绝地灬酷狼 2023-02-14 02:25 39阅读 0赞

## 一.简介 ##

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

## 二.属性说明 ##

1.movable-area属性说明：  
![在这里插入图片描述][20200531115430190.png]  
2.movable-view属性说明：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]  
除了基本事件外，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>

2.css样式

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

3.实现效果  
初始状态：  
![在这里插入图片描述][20200531121808395.png]  
上下移动：  
![在这里插入图片描述][20200531121850763.png]  
我们在使用原生组件，比如map组件时，map会覆盖别的基础组件，遮挡住别的视图，出现在视图最顶层，这时候使用以下两种视图，就能做到覆盖该原生组件。  
1.cover-view  
覆盖在原生组件上的文本视图，可覆盖的原生组件：video、map，支持click事件。  
2.cover-image  
覆盖在原生组件上的图片视图,可覆盖的原生组件：、，支持click事件，含有src属性，String类型，为图标路径，支持本地路径、网络路径，但不支持 base64 格式。  
不支持的 CSS有position: fixed、opacity、overflow、padding、linebreak、white-space。  
注意事项：

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

[20200531115430190.png]: https://img-blog.csdnimg.cn/20200531115430190.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200531115504177.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz,size_16,color_FFFFFF,t_70
[20200531121808395.png]: https://img-blog.csdnimg.cn/20200531121808395.png
[20200531121850763.png]: https://img-blog.csdnimg.cn/20200531121850763.png