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

相关推荐
疯狂的沙粒2 小时前
uniapp 开发企业微信小程序,如何区别生产环境和测试环境?来处理不同的服务请求
微信小程序·uni-app·notepad++
知兀2 小时前
【黑马程序员uniapp】项目配置、请求函数封装
uni-app
fakaifa6 小时前
【最新版】西陆洗车系统源码全开源+uniapp前端+搭建教程
java·小程序·uni-app·php·源码下载·西陆洗车·洗车小程序
anyup10 小时前
记一次解决 uni-app 真机运行时导致的白屏问题:Trae vs 通义灵码 vs Cursor
前端·uni-app·trae
getapi11 小时前
为什么 uni-app 开发的 App 没有明显出现屏幕适配问题Flutter 开发的 App 出现了屏幕适配问题
flutter·uni-app
老李不敲代码13 小时前
榕壹云健身预约系统:多门店管理的数字化解决方案(ThinkPHP+MySQL+UniApp实现)
mysql·微信小程序·uni-app·php·软件需求
iOS阿玮15 小时前
不想被苹果卡审最好错开这两个提审时间
uni-app·app·apple
每天都想着怎么摸鱼的前端菜鸟1 天前
uniapp开发app 实现简易的路由拦截器
vue.js·uni-app
随笔记1 天前
uniapp中获取设备wifi列表,已连接wifi信息
前端·javascript·uni-app
lqj_本人1 天前
鸿蒙OS&UniApp微服务架构实践:从设计到鸿蒙部署#三方框架 #Uniapp
架构·uni-app·harmonyos