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

一.简介

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

二.view

视图容器，相当于html中的div。属性说明如下：

备注：如果使用

组件编译时会被转换为 。

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

执行效果：

三.scroll-view

可滚动视图区域，可控制横向滚动和纵向滚动。属性说明：

<!-- 设置样式时外面的样式要大于里面的模块才有显示效果 -->
<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>

执行效果：

向左拖拽效果：

向左上拖拽效果：

注意事项：

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