Bootstrap

关于小程序swiper图片不能撑满解决方案

问题描述

最近在写小程序的时候使用了swiper组件,但是发现一个很奇怪的现象,如果给image组件设置mode=“widthFix”的话,那么图片的高度是不够撑满swiper-item的这样就会导致swiper的指示器往下偏移(其实没有偏移,只是图片没有撑满swiper-item的高度罢了)效果如下:
在这里插入图片描述

解决方案

方案一

这个方案我自己想出来的,但是会有一个缺点,如果图片过小的话,强行拉伸会导致图片变样,但是这种情况一般不会存在,ui在设计banner图的时候肯定不会给你那么小的,但是万一呢,哈哈哈,所以如果方案二看不懂的铁铁们,也可以使用这个,如果ui给你的图很小直接拉出出打死哈哈哈哈~~

  • 不要给image设置mode属性
  • 利用css找到image组件设置宽高都为100%
<swiper
	indicator-dots
	indicator-active-color="#fff"
	circular
	bindtap="onBannerClick"
    >
      <block wx:for="{
    {swiperList}}" wx:key="index">
        <swiper-item>
          <image 
          	bindload="onSwipperImageLoad"
          	class="banner-img"
          	src="{
    {item.imageUrl}}" 
            >
          </image>
        </swiper-item>
      </block>
</swiper>
.main-music .banner .banner-img {
   
  width: 100%;
  height: 100%;
}

方案二

这个方案是看coderwhy大神讲解的,稍微有些许

;