问题描述
最近在写小程序的时候使用了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大神讲解的,稍微有些许