国庆节之后快乐~~迟到的祝福嘻嘻~

疯玩放浪了8天后，我们也该学点有用知识了，是不？

上一章我们实现了第一步—— 获取轮播图的接口数据，

这一章我们将上一章未完的轮播图进行动态渲染，彻底搞定！

我们要做的是将轮播图的数据变成页面标签，并渲染出来。

步骤如下：

（一）

打开index.wxml文件，加入如下代码：

<view class="pyg_index"><!-- 搜索框 开始 --><SearchInput></SearchInput><!-- 搜索框 结束 --><!-- 轮播图 开始 --><view class="index_swiper"><swiper-itemwx: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%;}}}

保存，可以看到轮播图的比例已恢复正常。

上述步骤中，看起来过于繁琐，但却是不可缺少的，

因为swiper\image标签中都有默认样式，我们必须要进行处理。

再总结一下步骤：

1、查看原图的宽高；

2、使图片的高度自适应，宽度为100%

3、改变swiper标签的高度，使其等于图片的高度。

（三）设置轮播图的自动轮播

图片比例设置成功后，

我们需在swiper标签中加入一些属性，来实现轮播图的自动轮播。

使用如下三个属性：

打开index.wxml文件，

将autoplay 、indicator-dots、 circular这三个属性中加入swiper标签中，

代码如下：

保存，可看到轮播图已成功实现了自动轮播，下方的指示点以及循环轮播。