UniApp常用函数使用教程：uni.showToast详解

一、概述

在UniApp开发中，uni.showToast是一个非常常用的函数，用于在页面上显示一个短暂的提示框。该函数适用于各种场景，如操作成功提示、错误提示等。

二、基本用法

使用uni.showToast函数时，需要传入一个对象参数，该对象包含提示框的标题、图标等配置信息。

uni.showToast({
    title: '操作成功',
    icon: 'success'
});

上述代码将在页面上显示一个带有成功图标的提示框，提示内容为“操作成功”。

三、参数配置

uni.showToast函数的参数对象可以包含以下属性：

• title（字符串）：提示框的标题。
• icon（字符串）：提示框的图标，可选值为’success’、’loading’、’none’。默认为’none’。
• duration（数字）：提示框显示的毫秒数，默认为2000ms。如果设置为0，则提示框不会自动消失，需要手动调用uni.hideToast来隐藏。
• position（字符串）：提示框的显示位置，可选值为’top’、’center’、’bottom’。默认为’center’。
• success（函数）：接口调用成功的回调函数。
• fail（函数）：接口调用失败的回调函数。

四、示例代码

以下是一个完整的示例，展示了如何在UniApp中使用uni.showToast函数：

methods: {
    showSuccessToast() {
        uni.showToast({
            title: '操作成功',
            icon: 'success',
            duration: 2000
        });
    },
    showErrorToast() {
        uni.showToast({
            title: '操作失败',
            icon: 'none',
            duration: 2000,
            success: function () {
                console.log('提示框显示成功');
            },
            fail: function (err) {
                console.error('提示框显示失败', err);
            }
        });
    }
}

在页面的方法中调用上述函数，即可显示对应的提示框：

this.showSuccessToast(); // 显示成功提示框
this.showErrorToast(); // 显示错误提示框

五、注意事项

• 在同一时间只能显示一个提示框，如果多次调用uni.showToast，后调用的会覆盖先调用的。
• 如果设置了duration为0，需要手动调用uni.hideToast来隐藏提示框。
• 在不同平台上，提示框的样式可能会有所不同，但基本功能和用法是一致的。

六、总结

uni.showToast是UniApp中一个非常实用的函数，通过简单的配置即可实现各种提示效果。掌握该函数的使用方法，将有助于提高开发效率和用户体验。