微信小程序中轮播的使用以及注意事项

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

// 轮播图数据
swiperList[3]:
0 {4}
image_src   :   https://api-hmugo-web.itheima.net/pyg/banner1.png   
open_type   :   navigate 
goods_id    :   129
navigator_url   :   /pages/goods_detail/main?goods_id=129

// 样式
// 规定屏幕宽为750rpx。
// 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素.
// 则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 
.index_swiper{
  swiper{
    width: 750rpx;
    height: 340rpx;
    image{
      width: 100%;
    }
  }
}