小程序view设置背景图片_07. 小程序项目实战：设置首页轮播图（2）

上一章我们实现了第一步—— 获取轮播图的接口数据，这一章我们将上一章未完的轮播图进行动态渲染，彻底搞定！

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

步骤如下：

（一）

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

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

并且在index.wxss文件中写入如下代码：

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}

保存，观察轮播图页面的比例已经正常了。

图片的宽度我们设置了，但是高度未设置。

我们点击小程序左上角的“机型”，改变页面比例，比如改为window100%

改变页面比例后，图片只显示了一部分，如下图。

这是因为虽然图片的宽度已设置成功，但图片的高度还是默认的150px。

所以，我们要改变swiper标签的高度，使其与图片的高度一致。

3、让swiper标签的高度(150px)变成和图片的高度（340px）一致

打开index.less文件，加入swiper标签，设置宽高。

.index_swiper{
  swiper{
 width: 750rpx;
 height: 340rpx;
 image{
 width: 100%;
 }
 }
}

并且，打开index.wxss文件，写入如下代码：

.index_swiper swiper image {
  width: 100%;
}

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

上述步骤中，看起来过于繁琐，但却是不可缺少的，因为swiperimage标签中都有默认样式，我们必须要进行处理。再总结一下步骤：

1、查看原图的宽高；
2、使图片的高度自适应，宽度为100%
3、改变swiper标签的高度，使其等于图片的高度。

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

图片比例设置成功后，我们需在swiper标签中加入一些属性，来实现轮播图的自动轮播

使用如下三个属性：

打开index.wxml文件，将autoplay 、indicator-dots、 circular这三个属性中加入swiper标签中，代码如下：

index.wxml文件，轮播图设置的完整代码如下：

 <!-- 轮播图 开始 -->
  <view class="index_swiper">
    <!-- 
      1 swiper标签存在默认的宽度和高度
        100% * 150px 
      2 image标签也存在默认的宽度和高度
        320px * 240px 
      3 设计图片和轮播图
        1 先看一下原图的宽高  750 * 340 
        2 让图片的高度自适应 宽度 等于100%
        3 让swiper标签的高度 变成和图片的高一样即可 
      4 图片标签
        mode属性 渲染模式
          widthFix  让图片的标签宽高 和 图片标签的内容的宽高都等比例的发生变化 
     -->
    <swiper autoplay indicator-dots circular>
      <swiper-item
      wx:for="{{swiperList}}"
      wx:key="goods_id"
      >
        <navigator url="{{item.navigator_url}}">
          <image mode="widthFix" src="{{item.image_src}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 轮播图 结束 -->

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