uni-app在安卓端showToast会随着页面一起消失
uni-app在安卓端showToast会随着页面一起消失
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | 22000.613 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
PC开发环境操作系统版本号:Windows 11 22000.613
HBuilderX类型:正式
HBuilderX版本号:3.4.7
手机系统:Android
手机系统版本号:Android 9.0
手机厂商:小米
手机机型:小米8
页面类型:vue
vue版本:vue3
打包方式:云端
项目创建方式:HBuilderX
示例代码:
```javascript
<template>
<view>
<button @click="test">jump</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
methods: {
test(){
uni.navigateTo({
url:"/pages/test/test"
})
}
}
}
</script>
<style>
</style>
<template>
<view>
<button @click="testback">back</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
testback(){
uni.showToast({
title:"Test"
})
uni.navigateBack()
}
}
}
</script>
<style>
</style>
操作步骤: 点击jump按钮跳转到test.vue页面中,再点击back按钮。
预期结果: uni.showToast显示的提示会保留一段时间。
实际结果: uni.showToast显示的提示马上消失。
bug描述: 一个简单的例子:在index.vue中使用uni.navigationTo跳转到另一个界面后,点击界面中的一个按钮,该按钮执行uni.showToast显示提示然后执行uni.navigationBack,但是提示会马上消失,也就是说提示几乎没有显示,在H5中可以显示一切正常,但在安卓端中会异常。
更多关于uni-app在安卓端showToast会随着页面一起消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html
目前的行为是和微信小程序保持一致(页面级的),如果想保留使用 plus.nativeUI.toast
更多关于uni-app在安卓端showToast会随着页面一起消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中,showToast
是一个常用的 API,用于显示轻量级的提示信息。然而,在安卓端,showToast
可能会随着页面的跳转或关闭而消失。这是因为 showToast
是基于当前页面的上下文来显示的,当页面发生变化时,Toast 也会随之消失。
解决方案
-
延迟页面跳转
如果你希望在页面跳转前让 Toast 显示完整,可以使用setTimeout
延迟页面跳转的时间,确保 Toast 有足够的时间显示。uni.showToast({ title: '操作成功', icon: 'success', duration: 2000 // 设置 Toast 显示时间 }); setTimeout(() => { uni.navigateTo({ url: '/pages/nextPage' }); }, 2000); // 延迟 2 秒跳转
-
使用全局提示
如果你希望在页面跳转后仍然显示提示信息,可以考虑使用uni.showModal
或自定义全局提示组件,而不是showToast
。uni.showModal({ title: '提示', content: '操作成功', showCancel: false, success(res) { if (res.confirm) { uni.navigateTo({ url: '/pages/nextPage' }); } } });
-
自定义 Toast 组件
如果你需要更灵活的控制,可以自定义一个全局的 Toast 组件,通过 Vuex 或事件总线来控制其显示和隐藏。这样即使页面跳转,Toast 仍然可以保持显示。// 在 main.js 中注册全局组件 import Toast from '@/components/Toast.vue'; Vue.component('Toast', Toast); // 在页面中使用 this.$refs.toast.show('操作成功', 2000);
-
使用
uni.showLoading
替代
如果你希望在页面跳转时保持提示信息,可以使用uni.showLoading
,它不会随着页面跳转而消失。uni.showLoading({ title: '加载中...' }); setTimeout(() => { uni.hideLoading(); uni.navigateTo({ url: '/pages/nextPage' }); }, 2000);