安卓手机!用swiper做轮播效果,两张图片之间会有一个像素的空白

只要为swiper的父元素设置margin padding,或者用flex布局,让其居中,两个图片之间都会一个像素的空隙!

解决办法是,想让banner处于什么样的位置!就绝对定位就好了!

为什么会造成这样的原因没有查明白!

如下:

如果想要为swiper轮播的图片添加圆角时,一般都会直接给swpier上直接加border-radius,但是会发现不起作用,

解决方案是,在上面在添加一个属性:

transform: translateY(0);
<view class="centerBody">
   <swiper
        class="swiper_container"
        @change="swiperChange"
        :current="currentIndex"
        :autoplay="false"
        :interval="3000"
        :duration="100"
        :circular="list.length>1?true:false"
        :indicator-dots="false"
      >
        <swiper-item
          class="item"
          v-for="(item, index) in list"
          :key="index"
        >
          <view
            class="img_container"
            style=" height:164rpx"
            @click="itemClick(index, item)"
          >
            <img
              class="swiper_img"
              :src="item.elememtIcon"
              mode="widthFix"
              alt
              role="img"
              :aria-label="item.elementTitle"
            />
          </view>
        </swiper-item>
      </swiper>
    </view>

  

.centerBody {
  position: relative;
  margin-top: 24rpx;
}
.container-view {
  position: absolute;
  width: 702rpx;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 161rpx;
}

  

posted @ 2021-02-24 15:26  无忧lv  阅读(603)  评论(0编辑  收藏  举报