微信小程序.原生.轮播图

 示例代码：

<view class="index_swiper">
  <swiper circular indicator-dots autoplay>
    <swiper-item>
      <image mode="widthFix" src="https://api-hmugo-web.itheima.net/pyg/banner1.png"/>
    </swiper-item> 
    <swiper-item>
      <image mode="widthFix" src="https://api-hmugo-web.itheima.net/pyg/banner1.png"/>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="https://api-hmugo-web.itheima.net/pyg/banner1.png"/>
    </swiper-item>
  </swiper>
</view>

样式：

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

参数限制：

1. 小程序屏幕设置为750rpx
2. swiper默认100% * 150px和image默认320px * 240px
3. widthFix让图片宽高等比例

参考：

      1 swiper标签存在默认的宽度和高度

        100% * 150px

      2 image标签也存在默认的宽度和高度

        320px * 240px

      3 设计图片和轮播图

        1 先看一下原图的宽高  750 * 340

        2 让图片的高度自适应 宽度 等于100%

        3 让swiper标签的高度 变成和图片的高一样即可

      4 图片标签

        mode属性 渲染模式

          widthFix  让图片的标签宽高 和 图片标签的内容的宽高都等比例的发生变化

---

End