什么是视图容器？视图容器就是将页面分割为独立的、不同的部分。视图容器共包含：
view、scroll-view、swiper、movable-view、cover-view、cover-image
平台支持若无特殊说明，则表示所有平台均支持
- 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
- 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
-
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变化其他原因将用空字符串表示
示例：
- 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属性，不设置默认为10pxmovable-view 默认为绝对定位，top和left属性为0pxmovable-view的移动范围是在movable-area内，如果movable-view的宽或高值比movable-area大，则只能在x或y放向移动，若都超过，则无法移动movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动
示例：
我们在使用原生组件，比如map组件时，map会覆盖别的基础组件，遮挡住别的视图，出现在视图最顶层，这时候使用以下两种视图，就能做到覆盖该原生组件。
- cover-view
覆盖在原生组件上的文本视图，可覆盖的原生组件：
video、map，支持click事件
- 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 组件中使用时，不支持在全屏模式下展示
