<!--
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%;
}
}
}
