vxxcx——3-1 swiper组件 创建轮播图

轮播图

---

window 顶部

 

 导入轮播图 图片数据 

---

swiper 组件

包含：for循环遍历数据

轮播图 时间

轮播图扩展大小

<!-- indicator-dots="true" 是否显示小圆点 -->
<!-- autoplay="true" 是否自动播放 轮播图 -->
<!-- interval="2000" interval间隔  多久切换到下一张图片  2000单位为毫秒 -->
<!-- duration="1000" duration期间  切换图片要多久时间 单位也是毫秒 -->
<swiper indicator-dots="true" autoplay="true" interval="2000" duration="1000">
   <!-- <block> 建议把for写在block  本来for应该在<swiper-item>里面 -->
    <block wx:for="{{swiperImgUrls}}"><!-- for循环 遍历的是swiperImgUrls这个数组  -->
      <swiper-item>
        <image src="{{item.url}}" mode="widthFix" class="img"></image> 
        <!--item代指swiperimgurls；点url数组里的每个url-->
        <!--mode="widthFix" 宽度不变高度自动变化  -->
      </swiper-item>
    </block>
</swiper>

再把宽高比调成百分百