uni-app 预览图片时发生跳转事件页面被预览主图视图遮挡 详细请看demo
uni-app 预览图片时发生跳转事件页面被预览主图视图遮挡 详细请看demo
| 项目 | 信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | macOS Big Sur 11.1 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.18 |
| 手机系统 | iOS |
| 手机系统版本号 | IOS 14 |
| 手机厂商 | 苹果 |
| 手机机型 | iphoneX |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
操作步骤：
运行到app,点击预览图片，等待3s跳转到另外一个页面看效果
预期结果：
关闭预览图片界面或者层级比预览图片界面要高
实际结果：
预览图片无法关闭，并且层级最高
bug描述：
首页可以预览图片，当点击预览图片，期间如果发生跳转事件，这个预览图片不会消失，并且会挡住新的页面
更多关于uni-app 预览图片时发生跳转事件页面被预览主图视图遮挡 详细请看demo的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
可以通过业务逻辑避免吧
更多关于uni-app 预览图片时发生跳转事件页面被预览主图视图遮挡 详细请看demo的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个常见的预览图片与页面路由的层级冲突问题。在uni-app中，uni.previewImage接口创建的图片预览视图属于原生组件，默认层级最高，且不会随页面跳转自动关闭。
解决方案：
- 在跳转前关闭预览：确保在执行页面跳转前调用
uni.hideToast()或通过其他方式关闭预览。
// 在跳转前主动关闭预览
uni.hideToast()
uni.navigateTo({
url: '/pages/targetPage'
})
- 使用条件渲染控制预览：通过变量控制预览的显示状态，在跳转时重置状态。
data() {
return {
showPreview: false
}
},
methods: {
previewImage() {
this.showPreview = true
uni.previewImage({
urls: ['image_url'],
success: () => {
this.showPreview = false
}
})
},
jumpToPage() {
this.showPreview = false
uni.navigateTo({
url: '/pages/targetPage'
})
}
}
- 监听页面生命周期：在页面的
onHide或onUnload生命周期中关闭预览。
onHide() {
uni.hideToast()
}