4.2 swiper组件
本小节，我们来学习小程序提供的滑动视图容器——swiper组件，在post.wxml中加入以下代码：
最外层的<view></view>将作为整个页面的容器，在view的内部，我们加入了一个swiper组件。swiper组件主要由多个swiper-item组成，可以定义任意多个swiper-item。
同时，需要注意的是，swiper组件的直接子元素只可以是swiper-item，如果放置其他组件，则会被自动删除。但swiper-item下是可以放置其他组件或者元素的。
swiper-item元素仅仅只是一个容器，如果要显示内容，需要在swiper-item容器下再添加元素内容。如代码清单4-2所显示的一样，我们在每个swiper-item内都加入了一个image组件，用来显示UI效果图中的轮播图片，图片路径请根据自己项目的实际情况做出相应的修改。
添加完代码后，保存一下项目看看结果，如图4-4所示。
图4-4 添加swiper组件后的UI效果
swiper组件的第一个swiper-item元素图片已经显示出来了。在动手设置swiper组件的样式前，首先在post.wxss文件内，将swiper组件的高度和高度设置好。
添加完代码后，保存预览，发现图片的显示尺寸依然不正确。宽度没有呈现100%，高度也不是期望的600rpx。还需要对image组件设置同样的样式，在post.wxss中添加image组件的样式，添加完成后的页面代码如代码清单4-4。
此时再次预览小程序，发现样式已经符合预期的效果了，如图4-5所示。
图4-5 同时设置swiper和image样式后的效果
这里需要同时设置swiper组件和image组件的高宽，才能达到预期的效果。如果只设置image组件的高度同样是不可以的，读者可以把swiper组件的样式注释掉，看看只对image设置样式的结果。
要实现轮播效果，还要为swiper组件添加一些属性，分别是：indicator-dots、autoplay、interval，如代码清单4-5所示。
保存后预览一下效果。图片开始了轮播，每隔5秒钟更换一张。同时swiper组件上出现了3个小圆点，用来指示当前图片。
简单介绍一下这3个属性。
• indicator-dots
Boolean类型。用来指示是否显示面板指示点（上文提到的3个小圆点就是面板指示点，默认为false。
• autoplay
Boolean类型。用来决定是否自动播放，默认为false。
• interval
Number类型。用来设置swiper-item的切换时间间隔，默认为5000毫秒。
除了自动切换图片，swiper组件还可以通过拖动图片来进行切换，也可以通过点击面板指示点来切换。
官方在0.11.12210版本中为swiper组件新增了一个circular属性，这个属性可以使轮播图循环滚动。如果circular为false，那么当swiper组件滚动到第三张图片后就无法继续滚动了；但如果增加一个circular为true的属性，则当swiper组件滚动到第三张图片后，会继续向第一张图片滚动，从而形成循环滚动。
swiper组件的属性使用方式都比较简单，更多属性请参考官方API文档。