这一章来讲swiper 组件，做好准备了嘛？要开车了~~~~
swiper 组件是小程序当中的轮播图组件，在使用此组件时，需搭配 swiper-item 来使用，充当的作用是：滑块。（比如某宝首页不停轮播的图，就是由这个组件来实现的）。
即外层用swiper ，里面要放某一轮播项时，要用 swiper-item 来体现。
以上就是本节课的理论部分，言简意赅，咳咳，我知道都没看懂~~~
不要着急，老惯例，一起用代码来演示一下这个组件的使用及其注意事项吧~~
（一）swiper 的基本使用
1、新建一个页面，demo10
swiper 是轮播图的外层容器，每一轮播项swiper-item 内 都可加入图片、超链接等。
2、打开demo10.wxml 文件，删除内容，加入 swiper 标签，swiper-item标签，image标签。
这里我们是轮播图片，上一章说过，小程序的图片最好要来自于外网。
这里我们在某宝网上找了三张图片，复制了图片地址，结合标签，代码如下：
<swiper>
<swiper-item> <image src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>保存后，效果如图所示：
三张图片皆一显示，但是却省略了很多小细节：
（1）swiper 存在默认样式：图片高度为150px，宽度会100%显示；
（2）所呈现的图片默认值为320 × 240px
（二）如何让swiper 和页面做适配
由上图可以看到，我们的轮播图是不够美观的，与小程序界面并不是很切合，所以，这里我们要操作一下，使轮播图变得好看一些！
首先，轮播图的高度是固定的，无法根据内容再进行改变，所以，我们需要手动计算swiper 的高度，方法是：
找出原图的宽度和高度，通过表达式来等比例计算swiper 的高度和宽度。
1、找出原图的宽高。
方法是，根据图片地址，下载图片至本地，双击打开查看图片的宽高像素。
2、计算 swiper 的高
第一张图宽高是520 × 280 px
表达式为：swiper宽 / swiper高 = 原图宽 / 原图高
所以，height= swiper宽 = swiper宽 × 原图高 / 原图宽 =750rpx × 280 / 520
这样，我们已经求出swiper 的高，接下来代码表示。
3、打开demo10.wxss 文件，代码如下：
swiper{
width:750rpx;
height:calc(750rpx*280/520);
}
image{
width:750rpx;
}4、demo10.wxml文件中，要在image标签内加入上一章学的——mode 有效值“widthFix”
(作用：图片的宽度指定后，高度按比例自动进行调整)，代码如下：
<swiper>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>5、保存后，图片发生变化，与页面相适配
（三）swiper 的相关属性介绍
swiper 的相关属性介绍请参考官方文档介绍，下方链接直达！
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
接下来，重点介绍6个重点属性：
属性1：autoplay
控制轮播图是否能自动切换。
我们在demo10.wxml中，swiper 中加入autoplay 这一属性，代码如下：
<swiper autoplay="true">
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>保存后，静待5s，swiper开始进行自动轮播
属性2：interval
用来?动切换时间间隔，默认值是5000ms
这里，我们在swiper 标签中加入 interval 这一属性，切换时间间隔设置为1000ms，代码如下：
<swiper autoplay="true" interval="1000">
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>保存后，可以看到轮播图的切换时间明显缩短（之前默认是5s）
属性3：circular 衔接播放
用来控制轮播图是否循环播放，（上图中轮播图是播放完毕后，倒退回去再重新播放的）
代码如下：
属性4：indicator-dots
面板指示点、小圆点、也成为分页器、索引器。
我们在swiper 标签中加入这一属性，代码如下：
<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true">
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>保存后，轮播图中出现小圆点，其中黑色的表示图片已被选中；灰色的表示未选中。
属性5：indicator-color
用来设置未选中的小圆点的颜?
这里我们将原先的灰色改为蓝色（#0094ff），代码如下：
<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true" indicator-color="#0094ff">
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>保存后，可以看到未选中的小圆点颜色为蓝色。
属性6：indicator-active-color
用来设置选中的小圆点的颜?
这里我们将原先的黑色改为红色（#ff0094），代码如下：
<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true" indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/tfs/TB19Xy0e8FR4u4jSZFPXXanzFXa-520-280.jpg_q90_.webp"/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
</swiper>保存后，可以看到未选中的小圆点颜色为红色。
ending~~~关于swiper组件的介绍讲完了，大家一定要多敲多练习才能牢记哦~~~
有任何有疑问的地方，欢迎下方留言或者私信我哦~~~
搜索并关注微信公众号：飞寝旺食
获取更多小程序运营干货、免费的开发教程、源代码等！
小程序开发，我们是认真的！
