【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属性

相关推荐
自然 醒4 小时前
荣耀手机,系统MagicOS 9.0 USB配置没有音频来源后无法被adb检测到,无法真机调试的解决办法
adb·uni-app
*拯9 小时前
Uniapp Android/IOS 获取手机通讯录
android·ios·uni-app
gaojianqiao123410 小时前
uniapp引入七鱼客服微信小程序SDK
微信小程序·uni-app
zhangzuying102612 小时前
在uni-app中实现类似文心一言的流式对话功能:从fetch到websocket的实践
websocket·uni-app·文心一言
假客套17 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】3、API接口请求封装,封装后的简单测试以及实际使用
uni-app·旅游项目实战
JAVA叶知秋1 天前
uniapp自定义底部导航栏h5有效果小程序无效的解决方案
小程序·uni-app
moxiaoran57531 天前
uni-app学习笔记(二)--vue页面代码的构成和新建页面
笔记·学习·uni-app
一只程序熊1 天前
【uniapp】errMsg: “navigateTo:fail timeout“
服务器·前端·uni-app
沙尘暴炒饭1 天前
用uniapp在微信小程序实现画板(电子签名)功能,使用canvas实现功能
微信小程序·小程序·uni-app
DONSEE广东东信智能读卡器2 天前
蓝牙身份证阅读器使用Uniapp调用二次开发demo
javascript·uni-app·蓝牙·身份证阅读器