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

相关推荐
CHB8 小时前
uni-app,你的最佳vibe coding搭子
uni-app·vibecoding
怀君11 小时前
Uniapp——Android离线打包自定义基座教程
android·uni-app
李慕婉学姐15 小时前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
爱吃的强哥15 小时前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
2501_915918411 天前
TCP 抓包分析在复杂网络问题中的作用,从连接和数据流层面理解系统异常行为
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
じòぴé南冸じょうげん1 天前
APP本地调试正常,但是打包后出现账号密码解析错误,且前端未使用加密解密
小程序·uni-app·web app
快起来搬砖了2 天前
UniApp 路由配置实战:从全局守卫到 404 页面优雅处理
uni-app
5335ld2 天前
uniapp-APP端table列表左侧第一列固定、头部固定
windows·uni-app
一个假的前端男2 天前
uni-app App 端长按录音的工程级实现
uni-app
无名前端小白2 天前
uniapp 安卓离线打包, 无法调起系统安装应用
uni-app