【uniapp-兼容性处理】swiper在iOS上偶发出现后几张图片白屏情况

【日期】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属性

相关推荐
耶啵奶膘3 小时前
uniapp——地图路线绘制map
uni-app
shadouqi3 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩5 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤7 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端14 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.17 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰21 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Little_Code1 天前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首1 天前
uniapp 和原生插件交互
uni-app·交互
儿歌八万首1 天前
UniApp 中实现智能吸顶 Tab 标签导航效果
前端·javascript·uni-app