【日期】2025-04-14
【问题】
swiper在iOS上偶发出现后几张图片白屏情况
swiper内部的几个swiper-item垂直排列,各自进行滚动,样式方面兼容性出现问题
【原因】:
原代码:(不应在swiper-item添加style属性)
html
<swiper :circular="true" :autoplay="true" :interval="4000" :duration="1000" style="height: 690rpx;width: 750rpx;">
<swiper-item style="height: 690rpx;width: 750rpx;">
<view class="top">
<view class="top-swiper">
<swiper :vertical="true" :circular="true" :autoplay="true" :interval="2000" :duration="1000" :display-multiple-items="Math.min(2,swiperList.length)" :disable-touch="true" style="height: 114rpx;">
<swiper-item v-for="item in swiperList" :key="item">
<view class="swiper-item">
<image src="图片" mode=""></image> {{item}}
</view>
</swiper-item>
</swiper>
</view>
<view class="top-swiper-cover"></view>
</view>
</swiper-item>
<swiper-item style="height: 690rpx;width: 750rpx;">
<image style="height: 690rpx;width: 750rpx;" src="图片" mode=""></image>
</swiper-item>
<swiper-item style="height: 690rpx;width: 750rpx;">
<image style="height: 690rpx;width: 750rpx;" src="图片" mode=""></image>
</swiper-item>
</swiper>
【如何修复】:
将swiper-item上style删除
【总结】:
避免在uniapp组件上添加style属性