御风

发布：2022-02-16 18:35
更新：2022-02-17 14:05
阅读：670

【报Bug】急急急严重bug：swiper在微信浏览器显示错误，通过vue3+vite创建的项目

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 家庭中文版

浏览器平台：微信内置浏览器

浏览器版本：微信版本 8.0.18

项目创建方式： CLI

CLI版本号： 20H2

App下载地址或H5⽹址： https://health.eheren.com/v3/#/pages/helplines/helplines?sysCode=1001038

示例代码：

<swiper  
                :current="tabIndex"  
                class="swiper-box"  
                :duration="300"  
                @change="ontabchange"  
            >  
                <swiper-item class="swiper-item" v-for="(tab, index1) in [1, 2, 3]" :key="index1">  
                    {{ tab }}  
                </swiper-item>  
            </swiper>

操作步骤：

1.npm run build:h5 打包
2.发布
3.在安卓和Windows的微信内置浏览器swiper显示异常

复现地址：https://health.eheren.com/v3/#/pages/helplines/helplines?sysCode=1001038

预期结果：

swiper正常显示和滑动

实际结果：

在安卓和Windows微信内置浏览器swiper显示异常，swiper-item未显示出来

bug描述：

通过vue3+vite创建的项目，h5版本编译发布后，swiper插件swiper-item显示不出来，只有在安卓和Windows微信内置浏览器才会出现，其他手机内置浏览器、mac、iphone、未build:h5编译的状态都是正常显示。怀疑是vite兼容问题，希望官方大佬能回复解决一下，十万火急。

如果复现不了加我微信：myx1215382483

2022-02-16 18:35 负责人:无分享

3 个回复

BoredApe - 有问题就会有答案。

请上传一个能重现问题的测试工程

御风 (作者)

已上传

2022-02-17 11:25
御风 (作者)

复现地址：https://health.eheren.com/v3/#/

2022-02-17 13:54

御风 (作者)

已上传，复现步骤，npm i => npm run build:h5 发布 => 安卓微信内浏览器打开，或者win微信内浏览器打开

test.zip

BoredApe - 有问题就会有答案。

是由于微信浏览器不支持 inset: 0导致的

临时解决方法

::v-deep .swiper-box .uni-swiper-slides{  
    left: 0;  
    right: 0;  
    top: 0;  
    bottom: 0;  
}

该问题目前已经被锁定, 无法添加新回复

【报Bug】急急急严重bug：swiper在微信浏览器显示错误，通过vue3+vite创建的项目

示例代码：

`<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="ontabchange" > <swiper-item class="swiper-item" v-for="(tab, index1) in [1, 2, 3]" :key="index1"> {{ tab }} </swiper-item> </swiper>`

操作步骤：

1.npm run build:h5 打包
2.发布
3.在安卓和Windows的微信内置浏览器swiper显示异常

复现地址：https://health.eheren.com/v3/#/pages/helplines/helplines?sysCode=1001038

预期结果：

swiper正常显示和滑动

实际结果：

在安卓和Windows微信内置浏览器swiper显示异常，swiper-item未显示出来

bug描述：

3 个回复

公告

相关问题

【报Bug】急急急严重bug：swiper在微信浏览器显示错误，通过vue3+vite创建的项目

示例代码： <swiper :current="tabIndex" class="swiper-box" :duration="300" @change="ontabchange" > <swiper-item class="swiper-item" v-for="(tab, index1) in [1, 2, 3]" :key="index1"> {{ tab }} </swiper-item> </swiper>

操作步骤： 1.npm run build:h5 打包 2.发布 3.在安卓和Windows的微信内置浏览器swiper显示异常 复现地址：https://health.eheren.com/v3/#/pages/helplines/helplines?sysCode=1001038

预期结果： swiper正常显示和滑动

实际结果： 在安卓和Windows微信内置浏览器swiper显示异常，swiper-item未显示出来

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

示例代码：

`<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="ontabchange" > <swiper-item class="swiper-item" v-for="(tab, index1) in [1, 2, 3]" :key="index1"> {{ tab }} </swiper-item> </swiper>`

操作步骤：

1.npm run build:h5 打包
2.发布
3.在安卓和Windows的微信内置浏览器swiper显示异常

复现地址：https://health.eheren.com/v3/#/pages/helplines/helplines?sysCode=1001038

预期结果：

swiper正常显示和滑动

实际结果：

在安卓和Windows微信内置浏览器swiper显示异常，swiper-item未显示出来