i***@163.com
i***@163.com
  • 发布:2025-08-27 15:21
  • 更新:2025-08-27 15:21
  • 阅读:1101

【报Bug】swiper组件 在苹果14系统下swiper-item第二个重叠覆盖到第一个

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11

HBuilderX类型: 正式

HBuilderX版本号: 4.75

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: 12

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<view class="page-swiper-container" v-if="children.length"> <swiper class="swiper" @animationfinish="swiperChange" :current="currentIndx" mode="dot" :autoplay="false" interval="500" @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="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 != ''">
<p @click="noticeShow = true" class="noticeBtn">公告</p>
</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>  
                    <view class="page-bottom">  
                        <view class="item">  
                            <u-button  
                                v-show="advanceHisttory == '1' || advanceHisttory == '3' || advanceHisttory == '4'"  
                                shape="circle" type="primary" @click="gotoReserve">查看当前预约</u-button>  
                            <u-button v-show="advanceHisttory == '2'" shape="circle" type="primary"  
                                @click="reserveAgain">预约下一针</u-button>  
                            <!-- <u-button shape="circle" type="primary" @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="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="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="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>  

</view>

操作步骤:

上述指定系统版本可复现

预期结果:

swiper组件 在苹果14系统下swiper-item正常展示滑动

实际结果:

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

bug描述:

swiper组件 在苹果14系统下swiper-item第二个重叠覆盖到第一个,蓝色是第二个,橙色是第一个,向左滑动时放大效果也失效,vue2版本没有问题,升级vue3之后出现此bug

2025-08-27 15:21 负责人:无 分享
已邀请:

要回复问题请先登录注册