uni-app nvue页面 swiper在切换过程中点击tabbar时 @change等事件不触发
uni-app nvue页面 swiper在切换过程中点击tabbar时 @change等事件不触发
| 信息类别 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 15 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.14 |
| 手机系统 | iOS |
| 手机系统版本号 | IOS 14 |
| 手机厂商 | 苹果 |
| 手机机型 | 苹果xs max |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
操作步骤：
nvue页面 swiper组件在切换过程中点击原生tabbar
swiper的@change等事件就不触发了
预期结果：
触发事件
实际结果：
不触发
bug描述：
nvue页面 swiper在切换过程中点击tabbar
@change等事件就不触发了
更多关于uni-app nvue页面 swiper在切换过程中点击tabbar时 @change等事件不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
官方的 hello uni-app 就有这个问题 在切换过程中点击tab可复现此问题
更多关于uni-app nvue页面 swiper在切换过程中点击tabbar时 @change等事件不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的 nvue 页面中 swiper 组件与原生 tabbar 交互时的兼容性问题。当 swiper 处于滑动动画过程中，点击原生 tabbar 会中断 swiper 的动画流程，导致 @change 等事件无法正常触发。
问题原因在于原生 tabbar 的点击事件优先级较高，会打断 swiper 的过渡动画状态。建议通过以下方式解决：
- 在 swiper 的 @animationfinish 事件中处理页面切换逻辑，替代 @change 事件
- 使用 setTimeout 延迟处理 tabbar 点击事件，确保 swiper 动画完成
- 考虑在 swiper 切换期间禁用 tabbar 交互，通过 :disabled 属性控制
代码示例：
onTabItemTap() {
setTimeout(() => {
// 处理tabbar点击逻辑
}, 300)
}