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>
再把宽高比调成百分百