uni.showtoast，一个强大的消息提示框组件

一、介绍

对于大多数APP而言，消息提示框是一个非常核心且常用的组件，uni.showtoast就是这个任务的承担者，它是一个强大的消息提示框组件，提供了多种设置选项，可以自定义消息框的位置、样式、时长等多种参数，可以满足不同的需求。

二、基本调用方式

uni.showtoast的调用非常简单，只需要传入一个对象参数即可。其中，title属性是必需，表示消息提示文字内容，不传默认是空字符串，duration属性表示提示框停留的时长，单位是毫秒，默认为1500.

uni.showToast({
  title: '提示内容',
  icon: 'none', //成功、失败或者信息小图标
  mask:false, //防止触摸穿透
  duration:2000  //显示时间
})

三、自定义提示框的位置和样式

3.1、位置设置

除了简单的消息提示，我们经常需要将提示框放在页面的指定位置，例如在页面的顶端、中间、底部等等。 uni.showtoast提供了一个可选的position属性，可以指定提示框的位置。可选值如下：

• top
• bottom
• center

示例代码：

uni.showToast({
  title: '提示内容',
  position: 'top', //位置参数
  duration: 2000  //显示时间
})

3.2、样式设置

除了位置之外，我们还可以通过设置style属性来对消息框的样式进行自定义。style属性需要传入一个对象参数，其中可以设置background、padding、color、fontSize、borderRadius等属性。示例代码如下：

uni.showToast({
  title: "提示内容",
  icon: "none", // 成功、失败或者信息小图标
  mask:false, // 防止触摸穿透
  style:{
    'background-color': '#eb3e4a', // 背景色
    'padding': '10px 20px', // 内边距
    'color': '#fff', // 字体颜色
    'font-size': '14px', // 字体大小
    'border-radius': '5px', // 边框圆角
  },
  duration: 2000 // 显示时长
})

四、自定义图标

有时候，我们需要将消息提示框的图标替换成其他的图标，比如一些自定义的图标或者其他第三方图标库的图标。针对这种情况，uni.showtoast提供了icon属性，可以自定义图标，icon可选值如下：

• success
• loading
• none

示例代码如下：

uni.showToast({
  title: "操作成功",
  icon: "success", // 成功、失败或者信息小图标
  mask:false, // 防止触摸穿透
  duration: 2000 // 显示时长
})

五、监听事件

在一些特殊情况下，我们需要监听消息提示框是否已经显示或者是否已经消失。此时，uni.showtoast还提供了两个回调函数：successCallback和failCallback。它们分别对应了提示框消失和提示框出现的回调函数，示例代码如下：

uni.showToast({
  title: "提示内容",
  icon: "none",
  mask: false,
  duration: 2000,
  success: function() {
    console.log('消息框已经消失');
  },
  fail: function() {
    console.log('消息框已经出现');
  }
})

六、总结

本文简要介绍了uni.showtoast作为一个消息提示框组件的基本用法和一些常见的自定义参数设置选项。uni.showtoast提供了一个简单而强大的方式来实现消息提示功能。在实际开发中，我们可以根据实际需要来使用它，并根据需求进行自定义设置，使得消息提示框更加贴近产品需求，增强用户体验。