3.1 视图容器组件
视图容器组件的主要作用就是“容器”，与按钮、文字、进度条等组件不同，它主要由普通视图、滑动视图、拖动视图等构成，就像我们在画图时的一个个背景画布。
3.1.1 视图容器view
view是最基本的视图容器，与前端的div标签比较类似，自身没有任何大小颜色属性，通常作为一个基本容器存在。view的自带属性如表3.1所示。
表3.1 view组件的自带属性
【示例3-1】
（1）新建一个项目components，用于本节的代码展示。
（2）清空index.wxml和index.js的代码，并输入以下代码：
（3）运行代码，首页效果如图3.1所示。在接下来的小节里，我们将通过点击不同的按钮进入到对应的组件展示中。
图3.1 首页各功能演示选择列表
（4）接下来新建一个页面view，用来展示本小节的内容，代码如下：
运行效果如图3.2所示。
图3.2 view组件点击前后的样式变化
【代码解析】我们给parent-view设置了hover-class，在点击的时候颜色会发生变化。另外，延长了hover-start-time和hover-stay-time的时间，读者可以自行测试代码。最后sub-view中的hover-stop-propagation设置为false，所以点击中间白色部分是不会让parent-view变色的，如果想传递点击态，只需要改为true即可。
3.1.2 滚动视图scroll-view
介绍完了基本的视图容器，我们继续来看滚动视图容器——scroll-view。scroll-view的自带属性如表3.2所示。
表3.2 scroll-view组件的自带属性
【示例3-2】
由于scroll-view组件支持的属性特别多且大多不常用，因此我们只进行基本功能的展示，代码如下：
运行效果如图3.3所示。
图3.3 scroll-view组件滚动效果
【代码解析】scroll-view的应用十分简单，我们写好标签后，使用scroll-x、scroll-y标记出是横向或纵向滚动，样式方面需要设置宽、高等属性，即可满足大多数需求。
3.1.3 可移动视图movable-view
在手机的使用中，拖动也是一种常见的操作。接下来我们展示一下如何使用可移动视图容器——movable-view。movable-view的自带属性如表3.3所示。
表3.3 movable-view组件的自带属性
【示例3-3】
使用movable-view组件进行拖动方块的展示，代码如下：
运行效果如图3.4所示。
图3.4 movable-view组件拖动效果
【代码解析】这个组件的代码比较少，我们只需要设置movable-area为背景板，并在里面创建一个movable-view即可进行拖动操作，拖动方向direction通常设置为all。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。
3.1.4 覆盖视图cover-view
cover-view是可以覆盖于原生组件之上的文本视图容器，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，并且可以与cover-view和cover-image进行嵌套。cover-view的自带属性如表3.4所示。
表3.4 cover-view组件的自带属性
cover-view的属性也只有一个，不算是一个常用的组件。覆盖功能使用CSS的position也可以达到同样的效果，不过直接使用该功能也可以提高一些开发效率。
【示例3-4】
创建一个地图组件，并使用cover-view进行覆盖，代码如下：
运行效果如图3.5所示。
图3.5 cover-view组件的覆盖效果
【代码解析】在map组件内设置cover-view，就相当于在一个画布里面，坐标会回到左上角，接下来正常编写自己要展示的内容并设置样式即可。
3.1.5 滑块视图swiper
swiper是滑块视图容器，一般可以用作轮播图等效果。目前市面中的App通常都会在首页顶部做一个轮播图，所以该组件还是很常用的。swiper的自带属性如表3.5所示。
表3.5 swiper组件的自带属性
easing-function的默认值为default，还支持linear（线性动画）、easeInCubic（缓入动画）、easeOutCubic（缓出动画）、easeInOutCubic（缓入缓出动画），读者可以根据喜好自行选择。
【示例3-5】
swiper的属性比较复杂，我们挑选几个常用的来演示，代码如下：
运行效果如图3.6所示。
图3.6 swiper组件轮播图效果
【代码解析】swiper设置了自动滚动、显示指示器、切换间隔、切换速度、动画效果等属性，这些都可以在表格中找到一一对应的解释。swiper-item是必须放在swiper中使用的，通常轮播图中会放置一些图片，为了方便演示，本例直接用ABC的文字进行替代。