国庆节之后快乐~~迟到的祝福嘻嘻~
疯玩放浪了8天后，我们也该学点有用知识了，是不？
上一章我们实现了第一步—— 获取轮播图的接口数据，
这一章我们将上一章未完的轮播图进行动态渲染，彻底搞定！
我们要做的是将轮播图的数据变成页面标签，并渲染出来。
步骤如下：
（一）
打开index.wxml文件，加入如下代码：
<view class="pyg_index">
<!-- 搜索框 开始 -->
<SearchInput></SearchInput>
<!-- 搜索框 结束 -->
<!-- 轮播图 开始 -->
<view class="index_swiper">
<swiper-item
wx:for="{{swiperList}}"
wx:key="goods_id">
<navigator url="{{item.navigator_url}}">
<image src="{{item.image_src}}"></image>
</navigator>
</swiper-item>
</swiper>
<!-- 轮播图 结束 -->
</view>
保存，页面显示如下：
可以看到图片是正常显示的，但是外观很不美观，因为存在众多默认样式，比如：
swiper标签的默认宽高为：100%*150px
image标签存在默认宽高：320px*240px
这两个标签结合起来，就可以看到上图所示的情况。
（二）设置轮播图的宽高
1、查看原图的宽高
打开调试器-点击“wxml”-复制src 路径
粘贴至浏览器中 - 右键“检查”- 可以看到原图的宽高为：750*340
2、使图片的高度自适应，宽度设置为100%
我们可使用image标签中的mode属性进行渲染，同时使用“widthFix”有效值，
使图片的宽高与image标签的内容的宽高成比例变化。
代码如下：
即在第一步中的代码中，image标签中补充 mode="widthFix" 这行代码。
保存，小程序页面如下：
接下来，将index.wxss修改为index.less文件，加入如下代码：
让图片的高度自适应（省略不用写），宽度为100%
.index_swiper{
image{
width: 100%;
}
}
保存，观察轮播图页面的比例已经正常了。
图片的宽度我们设置了，但是高度未设置。
我们点击小程序左上角的“机型”，改变页面比例，比如改为window100%
改变页面比例后，图片只显示了一部分，如下图。
这是因为虽然图片的宽度已设置成功，但图片的高度还是默认的150px。
所以，我们要改变swiper标签的高度，使其与图片的高度一致。
3、让swiper标签的高度(150px)变成和图片的高度（340px）一致
打开index.less文件，加入swiper标签，设置宽高。
.index_swiper{
swiper{
width: 750rpx;
height: 340rpx;
image{
width: 100%;
}
}
}
保存，可以看到轮播图的比例已恢复正常。
上述步骤中，看起来过于繁琐，但却是不可缺少的，因为swiperimage标签中都有默认样式，我们必须要进行处理。再总结一下步骤：
1、查看原图的宽高；
2、使图片的高度自适应，宽度为100%
3、改变swiper标签的高度，使其等于图片的高度。
（三）设置轮播图的自动轮播
图片比例设置成功后，我们需在swiper标签中加入一些属性，来实现轮播图的自动轮播
使用如下三个属性：
打开index.wxml文件，将autoplay 、indicator-dots、 circular这三个属性中加入swiper标签中，代码如下：
保存，可看到轮播图已成功实现了自动轮播，下方的指示点以及循环轮播。
