uni-app swiper组件在苹果14系统下swiper-item第二个重叠覆盖到第一个

uni-app swiper组件在苹果14系统下swiper-item第二个重叠覆盖到第一个

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

<view class="page-swiper-container" v-if="children.length"> <swiper class="swiper" [@animationfinish](/user/animationfinish)="swiperChange" :current="currentIndx" mode="dot" :autoplay="false" interval="500" [@change](/user/change)="changeChild" :effect3d="true" previous-margin='20px' next-margin='20px'> <swiper-item class="swiper-item" v-for="(child, cindx) in children" :key="cindx"> <view :class="['slide', currentIndx === cindx ? 'active' : '']"> <view class="page-head"> <view class="page-head-bg pt32" style="child.gender == '1' ? 'background:' + swiperHeadBg[0] : 'background:' + swiperHeadBg[1]"> <view class="flex" style="justify-content: space-between;"> <view class="flex"> <view class="child-avatar img-wrap"> <image :src="babyAvatar" mode="aspectFit"></image> </view> <view class="child-info" v-if="currentChild"> <view class="child-name">{{ child.name }}</view> <view class="child-age">{{ child.birthDate }}</view> </view> <text class="child-info colorFFFFFF" v-else>{{ $t("SYSTEM.EMPTY") }}{{ $t("MODULE_NAME.CHILD") }}</text> </view> <view v-if="children.length < 5" [@click](/user/click)="gotoBind"> <view class="dot-box right-item" style="margin-right: 16px;"> <u-icon name="plus-circle" size="32rpx" label="添加" label-color="#fff" color="#fff" label-size="28rpx" margin-left="4px"></u-icon> </view> </view> </view> <view class="flex notice" style="background-color: rgba(255, 255, 255, 0.1);"> <view style="flex: 5;text-align: left;" class="bgFFF-10 font26 colorFFFFFF"> {{ child.recordOrganCodeShortName }} </view> <view style="flex: 1;text-align: right;" v-if="notice != ''">

公告

</view> </view> </view> </view> ``` 
            <!-- 功能区 -->  
            <!-- 展示疫苗 -->  
            <view class="block-wrap bgFFF radiob16 margint0 padding32 bgimgc6">  
                <view class="">  
                    <view style="height: 44rpx;line-height: 44rpx;margin-bottom: 16rpx;">  
                        <u-tag text="下一针推荐" type="primary" mode="light" size="mini"  
                            class="marginr8 margintB8" />  
                        <text class="color8C8C8C font26">接种疫苗</text>  
                    </view>  
                    <view v-if="nextVaccineList.vacList">  
                        <view class="font32" v-for="(item, index) in nextVaccineList.vacList" :key="index">  
                            {{ item.actualVaccineName || item.vaccineIdName || '暂无推荐' }}</view>  
                    </view>  
                    <view v-else class="font32">暂无推荐</view>  
                </view>  
                <view class="margint24">  
                    <text class="color8C8C8C font26">推荐最早接种时间</text>  
                    <view class="font32 margint8">{{ nextDate || '暂无推荐' }}</view>  
                </view>  
                <view class="margint24">  
                    <text class="color8C8C8C font26">预约状态</text>  
                    <view class="font32 margint8">{{ advanceHisttoryName || '未预约' }}  

                </view>  
                <view class="page-bottom">  
                    <view class="item">  
                        <u-button  
                            v-show="advanceHisttory == '1' || advanceHisttory == '3' || advanceHisttory == '4'"  
                            shape="circle" type="primary" [@click](/user/click)="gotoReserve">查看当前预约</u-button>  
                        <u-button v-show="advanceHisttory == '2'" shape="circle" type="primary"  
                            [@click](/user/click)="reserveAgain">预约下一针</u-button>  
                        <!-- <u-button shape="circle" type="primary" [@click](/user/click)="reserveAgain">预约下一针</u-button> -->  
                    </view>  
                </view>  

            </view>  

            <view class="block-wrap bgFFF radio16 margint16">  
                <view class="margint10 flex" style="justify-content: space-evenly;">  
                    <view class="width25">  
                        <view class="func-item flex-wrap" [@click](/user/click)="openReservations">  
                            <view class="img-wrap">  
                                <image src="../../static/img/child/p1.png" mode="aspectFit"></image>  
                            </view>  
                            <view class="text-center">  
                                <text class="child-info font28">历史预约</text>  
                            </view>  
                        </view>  
                    </view>  
                    <view class="width25" [@click](/user/click)="gotoRecords" stop>  
                        <view class="func-item flex-wrap">  
                            <view class="img-wrap">  
                                <image src="../../static/img/child/p2.png" mode="aspectFit"></image>  
                            </view>  
                            <view class="text-center">  
                                <text class="child-info font28">{{ $t("BLOCK_NAME.VACCINE_RECORD") }}</text>  
                            </view>  
                        </view>  
                    </view>  
                    <view class="width25" [@click](/user/click)="gotoSchoolChecking">  
                        <view class="func-item flex-wrap">  
                            <view class="img-wrap">  
                                <image src="../../static/img/child/p3.png" mode="aspectFit"></image>  
                            </view>  
                            <view class="text-center">  
                                <text class="child-info font28">{{ $t("BLOCK_NAME.SCHOOL_CHECKING") }}</text>  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </view>  
    </swiper-item>  
</swiper>

更多关于uni-app swiper组件在苹果14系统下swiper-item第二个重叠覆盖到第一个的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app swiper组件在苹果14系统下swiper-item第二个重叠覆盖到第一个的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的iOS系统下swiper组件渲染异常问题，主要与iOS的渲染机制和CSS样式处理有关。以下是几个关键排查点：

  1. 检查swiper-item尺寸计算：iOS对flex布局和百分比尺寸的计算可能与Android不同，建议给swiper-item设置明确的宽度：
.swiper-item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
  1. previous-margin/next-margin兼容性：这两个属性在iOS下可能出现计算偏差，尝试：
  • 将previous-margin='20px' next-margin='20px'改为previous-margin='40rpx' next-margin='40rpx'使用rpx单位
  • 或者通过CSS margin来实现边距效果
  1. effect3d属性问题：在部分iOS版本下，effect3d="true"可能导致层级错乱，建议暂时关闭此属性测试：
<swiper :effect3d="false">
  1. 强制重绘：在swiperChange和changeChild事件中添加：
this.$forceUpdate();
setTimeout(() => {
  // 可能需要的布局调整
}, 50);
回到顶部