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

2 回复

目前的行为是和微信小程序保持一致(页面级的),如果想保留使用 plus.nativeUI.toast

更多关于uni-app在安卓端showToast会随着页面一起消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中,showToast 是一个常用的 API,用于显示轻量级的提示信息。然而,在安卓端,showToast 可能会随着页面的跳转或关闭而消失。这是因为 showToast 是基于当前页面的上下文来显示的,当页面发生变化时,Toast 也会随之消失。

解决方案

  1. 延迟页面跳转
    如果你希望在页面跳转前让 Toast 显示完整,可以使用 setTimeout 延迟页面跳转的时间,确保 Toast 有足够的时间显示。

    uni.showToast({
      title: '操作成功',
      icon: 'success',
      duration: 2000 // 设置 Toast 显示时间
    });
    
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/nextPage'
      });
    }, 2000); // 延迟 2 秒跳转
    
  2. 使用全局提示
    如果你希望在页面跳转后仍然显示提示信息,可以考虑使用 uni.showModal 或自定义全局提示组件,而不是 showToast

    uni.showModal({
      title: '提示',
      content: '操作成功',
      showCancel: false,
      success(res) {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/nextPage'
          });
        }
      }
    });
    
  3. 自定义 Toast 组件
    如果你需要更灵活的控制,可以自定义一个全局的 Toast 组件,通过 Vuex 或事件总线来控制其显示和隐藏。这样即使页面跳转,Toast 仍然可以保持显示。

    // 在 main.js 中注册全局组件
    import Toast from '@/components/Toast.vue';
    Vue.component('Toast', Toast);
    
    // 在页面中使用
    this.$refs.toast.show('操作成功', 2000);
    
  4. 使用 uni.showLoading 替代
    如果你希望在页面跳转时保持提示信息,可以使用 uni.showLoading,它不会随着页面跳转而消失。

    uni.showLoading({
      title: '加载中...'
    });
    
    setTimeout(() => {
      uni.hideLoading();
      uni.navigateTo({
        url: '/pages/nextPage'
      });
    }, 2000);
回到顶部