uni-app基础组件—视图容器（View Container）

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

平台支持若无特殊说明，则表示所有平台均支持

1. view：视图容器，相当于html中的div。

属性说明：

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

Tips:

• 如果使用 <div> 组件编译时会被转换为 <view>

示例：
按照国际惯例，咱先来个Hello World

---

2. scroll-view：可滚动视图区域，可控制横向滚动和纵向滚动。

属性说明：

属性名	类型	默认值	说明	平台支持
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number	设置竖向滚动条位置
scroll-left	Number	设置横向滚动条位置
scroll-into-view	String	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	微信小程序
@scrolltoupper	EventHandle	滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle	滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

示例：

• 横向滚动
• 纵向滚动

Tips：

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

---

3. swiper：滑块视图容器，就是我们常用的轮播图
     swiper-item：仅可放置在 <swiper> 组件中，宽高自动设置为100%，唯一属性item-id，String类型，表示该 swiper-item 的标识符

属性说明：

属性名	类型	默认值	说明	平台支持
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	微信小程序、5+APP、H5、百度小程序
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	Number	1	同时显示的滑块数量	微信小程序、5+APP、H5、百度小程序
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	微信小程序、5+APP
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@animationfinish	EventHandle	动画结束时会触发 animationfinish 事件，event.detail 同上

Tips:
change事件返回 detail 中包含一个 source 字段，表示导致变更的原因，值：

• autoplay 自动播放导致swiper变化
• touch 用户划动引起swiper变化
• 其他原因将用空字符串表示

示例：

---

4. movable-view：可移动的视图容器，在页面中可以拖拽滑动

  movable-area：movable-view 的可移动区域，movable-view 的父级，必须设置width和height属性，不设置默认为10px

movable-area属性说明：

属性名	类型	默认值	说明
scale-area	Boolean	false	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area

movable-view属性说明：

属性名	类型	默认值	说明	平台支持
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性	微信小程序、5+APP、H5、百度小程序
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动	微信小程序、5+APP、H5、百度小程序
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	微信小程序、5+APP、H5、百度小程序
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	微信小程序、5+APP、H5、百度小程序
disabled	Boolean	false	是否禁用
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	微信小程序、5+APP、H5
scale-min	Number	0.5	定义缩放倍数最小值	微信小程序、5+APP、H5
scale-max	Number	10	定义缩放倍数最大值	微信小程序、5+APP、H5
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	微信小程序、5+APP、H5
animation	Boolean	true	是否使用动画	微信小程序、5+APP、H5、百度小程序
@change	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，	微信小程序、5+APP、H5、百度小程序

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

类型	触发条件
htouchmove	初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove	初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch

Tips:

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

示例：

---

  我们在使用原生组件，比如map组件时，map会覆盖别的基础组件，遮挡住别的视图，出现在视图最顶层，这时候使用以下两种视图，就能做到覆盖该原生组件。

5. cover-view

覆盖在原生组件上的文本视图，可覆盖的原生组件：video、map，支持click事件

6. cover-image

  覆盖在原生组件上的图片视图,可覆盖的原生组件：<video>、<map>，支持click事件，含有src属性，String类型，为图标路径，支持本地路径、网络路径，但不支持 base64 格式。
  不支持的 CSS有position: fixed、opacity、overflow、padding、linebreak、white-space、

Tips：

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