微信小程序swiper组件的使用，swiper和swiper-item组件基本使用

微信小程序，swiper和swiper-item组件的基本使用。

这节课来了解一下swiper和swiper-item组件的基本使用，在小程序中通过这两个组件的配合就可以实现一个轮播图的效果。

比如可以在页面上放一个swiper组件，它代表一个轮播图的容器，里面有几张轮播图就需要放几个swiper-item组件，比如当前要实现三张图的轮播，于是就放了三个swiper-item。

·每一个轮播图里面都放了一个view，给view都加了一个文本，同时也加了一个背景色来进行区分。

·当把结构设计好之后，紧接着还要去写样式对轮播图来进行美化。比如给轮播图的容器加上一个强制性的高度设置，高度为150个像素，就代表将来轮播图在高度上就会占150个像素。

·同时对里面的tem项也加了一个高度，让它的高度充满父容器。再给它加了一个行高和taxt-align，目的是为了让文本在横向和纵向上居中展示。

·然后分别给里面的每个tem项设个背景色，第一个是绿色，第二个是蓝色，第三个是红色。

接下来就去实现轮播图效果。打开微信开发者工具，首先来编写页面的结构。

·在最外层放一个容器swiper，里面是轮播图的item项。有几张轮播图就放几个swiper-item。

·先放第一个swiper-item，然后需要在item项里面放一个对应的view，代表这是一张。

·里面放一个文本A，再加一个样式item快速复制。

·第二个里面放一个文本B，第三个里面放一个文本C，然后保存。

·这时候在结构算是有了。大家来看我这个鼠标在里面拖动，这是B，再拖动，这是C，再往回拖，又回到了B。证明基本的轮播效果就已经实现了。但是为了让轮播图更加好看一些，接下来要去写样式了，先给包裹性的容器加一个class类名swiper-box。

·保存，去写样式，先加一个强制性的高度，在wxss文件中加一个类名选择器高度是150像素。

·接下来需要给里面这些item项去加一些样式通过类名选择器选中所有的item项，加一个高度让它撑满父容器的高度是100%，同时再加一个行高，让里面的文本在纵向上来进行居中，横向居中是text-align：center。

·保存之后看一下效果，大家可以发现文本被摆到了中间的位置，但是这个效果还不是很明显，需要给这里面的每一个view组件添加一个背景颜色用来区分。这时候可以使用css3里面的选择器n th-child来选中。选中第一个background，color设置一个green绿色。然后快速复制出后面的两个，第二个设置一个blue蓝色，第三个设置一个red红色。

·保存之后看一下效果，当前页面上就有了一个轮播图区域，然后滑动第二个，第三个，再后退，这样就成功渲染出一个轮播图的效果。