uni-app之视图容器【view、scroll-view】

迈不过友情╰ 2023-02-13 05:52 32阅读 0赞

## 一.简介 ##

视图容器就是将页面分割为独立的、不同的部分。视图容器共包含：view、scroll-view、swiper、movable-view、cover-view 、cover-image。

## 二.view ##

视图容器，相当于html中的div。属性说明如下：  
![在这里插入图片描述][2020052718554746.png]  
备注：如果使用

组件编译时会被转换为 。

<view class="text">
      Hello World
    </view>

执行效果：  
![在这里插入图片描述][20200527190031707.png]

## 三.scroll-view ##

可滚动视图区域，可控制横向滚动和纵向滚动。属性说明：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]

<scroll-view class="srcoll-view" scroll-x="true" scroll-y="true" scroll-left="120"> 
    	<view id="left" class="scroll-view-left">
    		111
    	</view>
    	<view id="right" class="scroll-view-right">
    		222
    	</view>
    </scroll-view>

执行效果：  
![在这里插入图片描述][20200527192245885.png]  
向左拖拽效果：  
![在这里插入图片描述][20200527192322639.png]  
向左上拖拽效果：  
![在这里插入图片描述][20200527192425204.png]  
注意事项：

1.  5+APP和小程序中，请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2.  scroll-into-view 的优先级高于 scroll-top
3.  使用 scroll-view 会和原生下拉刷新造成冲突，所以在使用 scroll-view 的地方不建议使用下拉刷新，也不建议监听 onPullDownRefresh 事件
4.  若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view

[2020052718554746.png]: https://img-blog.csdnimg.cn/2020052718554746.png
[20200527190031707.png]: https://img-blog.csdnimg.cn/20200527190031707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527191931874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz,size_16,color_FFFFFF,t_70
[20200527192245885.png]: https://img-blog.csdnimg.cn/20200527192245885.png
[20200527192322639.png]: https://img-blog.csdnimg.cn/20200527192322639.png
[20200527192425204.png]: https://img-blog.csdnimg.cn/20200527192425204.png