【报Bug】用swiper 组件包裹的页面，页面布局混乱

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号：版本 10.0.22621 版本 22621

HBuilderX类型：正式

HBuilderX版本号： 4.65

手机系统： iOS

手机系统版本号： iOS 14

手机厂商：苹果

手机机型： 14.1

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

        <swiper-item class="swiper-item">  
            <Market @navTypeChange="marketNavType" ref="market"/>  
        </swiper-item>  

        <swiper-item class="swiper-item">  
            <Search @showSoft="showSoftCloud" @showStudy="showStudyCloud"/>  

        </swiper-item>  
        <swiper-item class="swiper-item">  
            <KnowledgeRecommend ref="recommend"/>  
        </swiper-item>  

    </swiper>

操作步骤：

安装登录后必现

预期结果：

期望各个页面独立展示，不重叠到一起

实际结果：

部分手机重叠，已知报错的型号13.7.，14.1

bug描述：

用swiper 组件包裹的页面，页面布局混乱

2025-06-26 09:05 负责人:无分享

1 个回复

DCloud_UNI_HT

实例代码不全，无法明确验证问题，猜测大概率是样式问题，排查方案：

查看.swiper-box 和 .swiper-item 是否设置了正确的样式
简化代码，注释 Market 组件，给 .swiper-item 增加类似红色等明显的边框，看是否正确显示 swiper
如上操作没问题，查看 Market 组件内部样式是否冲突。
主要查看是否 flex 布局造成的布局横向展示

要回复问题请先登录或注册

【报Bug】用swiper 组件包裹的页面，页面布局混乱

操作步骤：

安装登录后必现

预期结果：

期望各个页面独立展示，不重叠到一起

实际结果：

部分手机重叠，已知报错的型号13.7.，14.1

bug描述：

1 个回复

公告

相关问题

【报Bug】用swiper 组件包裹的页面，页面布局混乱

操作步骤： 安装登录后必现

预期结果： 期望各个页面独立展示，不重叠到一起

实际结果： 部分手机重叠，已知报错的型号13.7.，14.1

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

安装登录后必现

预期结果：

期望各个页面独立展示，不重叠到一起

实际结果：

部分手机重叠，已知报错的型号13.7.，14.1