问题:如下图,swiper轮播图两侧会有留白,没有撑满swiper
失败的尝试:
1.调整图片尺寸
2.设属性设置image的mode为scaleToFill
3.设置item的属性
都没能实现将图片填充满轮播图,图片会有右侧和底部两块留白
通过调试器查看到image区域很小,怀疑是image本身属性的问题
随后尝试在wxss文件中给image创建了一个宽高都是100%的class后,解决了问题,image本身就回去占满100%的父容器的宽高
代码方式如下:
.wxss代码
.s-i-image{
height: 100%;
width: 100%;
}
.wxml代码
<swiper-item>
<image class="s-i-image" src="/resource/2.png"/>
</swiper-item>