4.2 视图容器组件
视图容器组件主要包含5种，如表4-2所示。
表4-2 视图容器组件
4.2.1 view
view是静态的视图容器，通常用<view>和</view>标签表示一个容器区域。需要注意的是，view容器本身没有大小和颜色，需要由开发者自己进行样式设置。
view对应的属性如表4-3所示。
表4-3 view组件属性
【例4-1】 视图容器组件view的简单应用
WXML（pages/demo01/view/view.wxml）文件代码如下：
视频讲解
WXSS（pages/demo01/view/view.wxss）文件代码如下：
运行效果如图4-1所示。
图4-1 视图容器组件view的简单应用
【代码说明】
本示例在view.wxml中使用了两组父子view容器嵌套效果，并在view.wxss文件中分别定义它们的class属性值为view_parent和view_son。默认样式效果相同，父容器均为浅蓝色背景、宽100%、高300rpx；子容器均为浅黄色背景、宽50%、高150rpx；单击态均设置为单击后背景颜色更新为红色效果。其中第2组子容器设置了hover-stop-propagation来阻止单击态传递给祖先元素。
在图4-1中，图(a)为页面初始效果，此时两组案例效果完全相同；图(b)和图(c)分别为单击第1、2组子容器的效果。由图4-1可见第1组父子容器均变为红色，而第2组仅有子容器变为红色，因此hover-stop-propagation生效。
4.2.2 scroll-view
<scroll-view>是可滚动视图区域，对应的属性如表4-4所示。
表4-4 scroll-view组件属性
注意：在使用竖向滚动时需要给<scroll-view>一个固定高度，并且通过WXSS设置height。
【例4-2】 视图容器组件scroll-view的简单应用
WXML（pages/demo01/scroll-view/scroll-view.wxml）的代码片段如下：
视频讲解
WXSS（pages/demo01/scroll-view/scroll-view.wxss）的代码片段如下：
运行效果如图4-2所示。
图4-2 视图容器组件scroll-view的简单应用
【代码说明】
本示例在scroll-view.wxml中设置了两组<scroll-view>组件，分别使用属性scroll-y和scroll-x定义其纵向和横向滚动。在每组<scroll-view>内部均包含3个<view>用于标识第几页。
在图4-2中，图(a)为页面初始效果，此时都显示第一个<view>的内容；图(b)为滚动过程，由该图可见分别实现了纵向和横向滚动效果。
4.2.3 swiper
<swiper>也称为滑块视图容器，通常使用该组件制作幻灯片切换播放效果。<swiper>组件的可用属性如表4-5所示。
表4-5 swiper组件属性
从1.4.0开始，change事件返回的detail中包含一个source字段，表示导致变更的原因，可能值如下。
• autoplay：自动播放导致swiper变化。
• touch：用户滑动引起swiper变化。
• 其他原因用空字符串表示。
例如：
<swiper indicator-dots autoplay></swiper>
上述代码表示希望实现一个带有指示点的滑块视图容器，并且需要自动播放。但是仅凭这一句代码是不够的，<swiper>标签必须配合<swiper-item>组件一起使用，该组件才是用于切换的具体内容。
在<swiper-item>中可以包含文本或图片，其宽／高默认为100%。需要注意的是，<swiper>组件中可以直接放置的只有<swiper-item>组件，否则会导致未定义的行为。
【例4-3】 视图容器组件swiper的简单应用
WXML（pages/demo01/swiper/swiper.wxml）的代码片段如下：
视频讲解
WXSS（pages/demo01/swiper/swiper.wxss）的代码片段如下：
运行效果如图4-3所示。
图4-3 视图容器组件swiper的简单应用
【代码说明】
本示例在swiper.wxml中设置了一个可以自动播放的<swiper>组件，每隔6秒翻页且翻页动画效果持续3秒完成。该组件内部包含了3组<swiper-item>，且在每组<swiper-item>中均使用<view>组件配合文本内容标记当前是第几页。在swiper.wxss中设置<swiper>和<swiper-item>的高度均为300rpx，其中<swiper-item>还外加30号字体、浅蓝色背景以及行高300rpx的样式效果。
在图4-3中，图(a)为页面初始效果，此时默认显示第1页内容；图(b)和图(c)分别显示第2、3页内容，由该图可见指示点会随着翻页发生变化。
4.2.4 movable-view
<movable-view>也称为可移动视图容器，该组件可以在页面中拖拽滑动。注意，该组件不能独立使用，必须放在<movable-area>组件中且是直接子节点，否则无效。
<movable-area>组件是<movable-view>的可移动区域范围，其属性如表4-6所示。
表4-6 movable-area组件属性
注意：movable-area可以自定义width和height属性，其默认值均为10px。
<movable-view>组件的属性如表4-7所示，该组件支持的最低版本为1.2.0。
表4-7 movable-view组件属性
注意事项如下：
（1）movable-view必须设置width和height属性，若不设置默认为10px。
（2）movable-view默认为绝对定位，top和left属性为0px。
（3）当movable-view小于movable-area时，movable-view的移动范围是在movable-area内。
（4）当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（X轴方向和Y轴方向分开考虑）。
【例4-4】 视图容器组件movable-view的简单应用
WXML（pages/demo01/movable-view/movable-view.wxml）的代码片段如下：
视频讲解
WXSS（pages/demo01/movable-view/movable-view.wxss）的代码片段如下：
运行效果如图4-4所示。
图4-4 视图容器组件movable-view的简单应用
【代码说明】
本示例包含了3组效果，即<movable-view>的尺寸在<movable-area>范围内、<movable-view>的尺寸大于<movable-area>的范围、<movable-view>的尺寸可缩放。在movable-view.wxss中设置<movable-area>统一样式为宽／高均为150rpx、浅蓝色背景；设置<movable-view>统一样式为红色背景，且第1组和第3组中的<movable-view>宽／高均为50rpx、第2组中的<movable-view>宽／高均为180rpx。在movable-view.wxml中为<movable-view>使用direction='all'属性表示允许在各方向移动，特别为第3组<movable-view>设置scale属性，表示允许放大、缩小。
4.2.5 cover-view
<cover-view>是可覆盖在原生组件上的文本视图容器，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher等。其内部只允许嵌套使用<cover-view>、<cover-image>和<button>。该组件的属性如表4-8所示。
表4-8 cover-view组件属性
注意：该组件从1.4.0版本开始支持。
<cover-image>是可覆盖在原生组件上的图片视图容器，可覆盖的原生组件与<cover-view>相同。该组件可以直接使用或被嵌套在<cover-view>中，其属性如表4-9所示。
表4-9 cover-image组件属性
注意：该组件也从1.4.0版本开始支持。
【例4-5】 视图容器组件cover-view的简单应用
WXML（pages/demo01/cover-view/cover-view.wxml）的代码片段如下：
视频讲解
WXSS（pages/demo01/cover-view/cover-view.wxss）的代码片段如下：
运行效果如图4-5所示。
图4-5 视图容器组件cover-view的简单应用
【代码说明】
本示例在cover-view.wxml中放置了一个<map>组件用于显示默认地图画面，并在其内部放置了一个<cover-view>用于覆盖在地图上方。在这个<cover-view>内部放置了<cover-view>、<cover-image>和<button>组件，分别用于显示自定义内容的文本、图片和按钮效果。由图4-5可见，<cover-view>所包含的内容可以覆盖在<map>组件上方正确显示。