uni-app uni.showToast 回调触发时间点

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app uni.showToast 回调触发时间点

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：4.28

手机系统：Android

手机系统版本号：Android 14

手机厂商：华为

手机机型：nova10

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

onShow() {
    uni.showToast({
        title: "保存成功",
        complete: function () {
            uni.navigateBack()
        }
    })
}

操作步骤：

必现

预期结果：

停顿1500毫秒后再回调

实际结果：

直接回调函数

bug描述：

uvue 在执行uni.showToast 弹窗了，立刻执行complete回调，没有停止1500毫秒

onShow() {
    uni.showToast({
        title: "保存成功",
        complete: function () {
            uni.navigateBack()
        }
    })
}

Harmonyos Next教程
4 回复

这个应该不算BUG，文档描述是“调用成功”触发，而不是“调用结束”触发。我目前是通过addInterceptor拦截，延迟duration后再触发回调


也许不是个BUG，如果是当前页面还好，弹窗能正常显示；如果是转跳，就看不到效果

这个是调用成功马上就会回调，没有销毁后的回调哦，，你可以弹出之后再用定时器比如 setTimeout(() => uni.navigateBack(),1500)。。也可以自己把这个方法二次封装，在函数内实现，之后即可在所有地方调用这个封装的方法来实现你的这个功能了

在 uni-app 中，uni.showToast 方法用于显示一个消息提示框。虽然 uni.showToast 本身并不直接支持回调函数（即它没有像 success 或 fail 这样的回调参数），但你可以通过一些变通的方法来实现类似的回调逻辑。

通常，uni.showToast 是在某个操作之后立即调用的，用于给用户一个即时反馈。如果你需要在 uni.showToast 显示之后执行某些操作，你可以利用 JavaScript 的异步执行机制（如 setTimeout）或者结合其他异步操作（如网络请求）的回调来实现。

下面是一个示例，展示如何在 uni.showToast 显示后，通过 setTimeout 模拟一个回调逻辑：

// 假设在某个事件触发时调用该函数
function showToastWithCallback() {
    // 显示Toast消息
    uni.showToast({
        title: '加载中...',
        icon: 'loading',
        duration: 2000 // 持续时间为2秒，这里设置为loading类型，通常会持续显示直到手动隐藏
    });

    // 使用setTimeout模拟异步操作后的回调
    setTimeout(() => {
        // 隐藏Toast消息（对于loading类型的Toast，需要手动隐藏）
        uni.hideToast();

        // 在这里执行你的回调逻辑
        console.log('Toast已隐藏，执行回调逻辑');

        // 例如，可以是一个网络请求的回调
        fetchData().then(data => {
            console.log('数据获取成功：', data);
            // 可以在这里处理获取到的数据
        }).catch(error => {
            console.error('数据获取失败：', error);
        });

    }, 2000); // 与Toast的持续时间保持一致，这里设为2秒
}

// 模拟一个网络请求函数
function fetchData() {
    return new Promise((resolve, reject) => {
        // 模拟网络延迟
        setTimeout(() => {
            const success = true; // 假设请求成功
            if (success) {
                resolve({ message: '数据加载完成' });
            } else {
                reject(new Error('数据加载失败'));
            }
        }, 500); // 模拟500ms的网络延迟
    });
}

// 调用函数以触发Toast显示和回调逻辑
showToastWithCallback();

在这个示例中，uni.showToast 显示一个加载中的提示，并通过 setTimeout 在2秒后隐藏Toast并模拟执行回调逻辑。这里的 fetchData 函数模拟了一个网络请求，并在请求完成后处理结果。你可以根据你的实际需求调整 setTimeout 的时间和 fetchData 函数的内容。

回到顶部