uni-app nvue的tab切换出现严重问题

uni-app nvue的tab切换出现严重问题

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7
HBuilderX类型 正式
HBuilderX版本号 3.1.12
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 华为mate50 pro
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

进入首页》切换下是否正常（正常的）》点任意一行进入详情页》再点详情页顶部搜索进入搜索页》然后连续返回首页》再切换tab就会出现问题（注意：上面上传的压缩过的视频也演示了此步骤）

预期结果：

不管怎么跳页面，tab切换都是正常的

实际结果：

暂未解决

bug描述：

使用的hello-app中提供的swiper-list-nvue做的tab切换，页面tab切换一开始是正常的，但是当我连续跳进其他页面两次及以上再返回一开始的页面，tab切换就会出现问题。经过排查发现返回后animationfinish不触发，还有就是onswiperscroll获取的数值也是不准确的，所以导致tab上面的横条乱跳，甚至不会落在当前选项上面。我测试了下hello-app中的swiper-list页面也会出现此问题，希望官方或者大佬能够解决下该问题。如果能解决问题，可以加我QQ领取红包526551383，有偿解决。已上传附件和视频，首页的tab切换为例。

附件


更多关于uni-app nvue的tab切换出现严重问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

不好意思 手机型号打错了 是mate30 pro

更多关于uni-app nvue的tab切换出现严重问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


希望大佬们积极帮忙解决下问题，我们项目很多页面都用到了tab切换，目前就这一个大问题未解决。

补充一下，在我的手机上面，从官方下载的hello-app的apk包安装在我的手机上面，首页的tab切换也有这个问题，希望官方尽早解决问题。。。

使用其他设备是否正常？

回复 DCloud_UNI_Anne: 苹果手机好像是正常的，就是安卓发现有问题，但是安卓其他牌子的手机还没试过。目前hello-app在我手机上面也是这样的问题

这是一个已知的 nvue 页面中 swiper 组件在页面栈深度切换后可能出现的 bug。当页面经过多次跳转返回后，swiper 的相关事件（如 animationfinish）可能无法正常触发，且 onswiperscroll 返回的数值不准确，导致 tab 指示器位置错乱。

建议尝试以下解决方案：

  1. 在页面 onShow 生命周期中强制重置 swiper 状态：
onShow() {
    this.$nextTick(() => {
        // 强制重置当前页索引
        this.currentTab = 0 // 或需要显示的索引
        // 可能需要调用 swiper 的 resize 方法
    })
}
  1. 使用条件渲染控制 swiper 的显示：
data() {
    return {
        showSwiper: true
    }
},
onHide() {
    this.showSwiper = false
},
onShow() {
    this.showSwiper = true
}
回到顶部