3.2 可滚动的容器视图组件

小程序的默认布局框架提供了很好的延展性。因此，即使不使用滚动容器组件，当内容区域的尺寸大于窗口尺寸时，内容区域就默认会变得可以滚动。小程序开发框架中也提供了一些用于将窗口的某一部分作为可滚动区域的组件。

3.2.1 scroll-view滚动视图组件

scroll-view是一个容器组件，在使用时必须为其设置明确的尺寸，即style列表中的width属性和height属性。下面的代码演示了scroll-view的基础用法。首先，在index.wxml文件中编写如下代码：

其次，在index.wxss文件中编写如下样式表：

运行上述代码，在页面上的scroll-view区域内可以进行水平方向和垂直方向上的滚动。scroll-view中如果添加了scroll-x则表示允许水平方向上的滚动，如果添加了scroll-y则表示允许垂直方向上的滚动。scroll-view组件中的常用属性如表3-4所示。

在使用scroll-view滚动视图时，需要注意以下3点。

● 滚动视图必须设置明确的尺寸。

● scroll-into-view定位属性的优先级要高于scroll-top/scroll-left。

● scroll-top/scroll-left设置的值必须为数值，不能带单位。

3.2.2 swiper轮播组件

swiper是一个更加高级的滚动容器组件，在引用开发中经常会使用到轮播组件，swiper将轮播组件的自动播放、滑动交互、面板知识点等都进行了封装，使用十分方便，示例如下。首先，在index.wxml文件中编写如下代码：

其次，在index.wxss文件中添加如下样式表的定义：

①注意：

swiper中只能放置swiper-item组件，swiper-item组件作为轮播组件中的元素视图可以继续嵌套其他组件。swiper-item组件的item-id属性作为元素的唯一标识，用来进行元素的定位。

swiper组件的常用属性如表3-5所示。

3.2.3 movable-view可拖曳组件

movable-view组件允许用户在一定范围内进行组件的拖住放置。movable-view组件必须放置在movable-area容器组件内，示例如下。首先，在index.wxml文件中编写如下代码：

其次，在index.wxss文件中添加如下样式表：

运行上述代码，可以尝试在窗口中进行色块的拖曳移动。

在使用movable-area时，必须明确为其指定尺寸。如果movable-view的尺寸小于movable-area的尺寸，则用户可以在movable-area范围内进行movable-view组件的拖曳放置；如果movable-view的尺寸大于movable-area的尺寸，则其表现效果与scroll-view基本一致。

movable-view组件的常用属性如表3-6所示。