【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 全局使用字体教程
css·uni-app
Best3 小时前
uniapp 微信小程序记录
微信小程序·小程序·uni-app
shykevin5 小时前
uni-app x开发商城系统,商品列表点击跳转至商品详情页
windows·uni-app
蜕变菜鸟5 小时前
PC网站和uniapp安卓APP、H5接入支付宝支付
uni-app
狼性书生6 小时前
uniapp实现的Tab 选项卡组件模板
前端·uni-app·vue·组件·插件
糖糖2468 小时前
uniapp + uni-ui + vue3转cli
uni-app
多秋浮沉度华年8 小时前
uni-app开发app移动端使用ucharts自定义标签栏Tooltip
uni-app
2501_9160074711 小时前
手机使用过的痕迹能查到吗?完整查询指南与步骤
android·ios·智能手机·小程序·uni-app·iphone·webview
Amewin17 小时前
在vue3+uniapp+vite中挂载全局属性方法
javascript·vue.js·uni-app
2501_915106321 天前
App HTTPS 抓包 工程化排查与工具组合实战
网络协议·ios·小程序·https·uni-app·php·iphone