如何设置小程序轻提示Toast_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

对操作结果的轻量级反馈，无需用户操作即可消失。最长文案不超过 2 行，最多可以显示 24 个字符，文案过长会被截断。

属性

属性	类型	必填	默认值	说明
type	string	否	-	Toast 类型，展示相应图标。支持 success / fail / warning / loading
content	string	是	-	Toast 文本内容
icon	Icon 类型	否	-	Toast 图标
image	string	否	-	Toast 图标
duration	number	否	2000 ms	Toast 持续时间，duration 为 0 时不会自动关闭。
visible	boolean	是	false	是否隐藏
showMask	boolean	否	false	是否展示蒙层
maskCloseable	boolean	否	false	点击蒙层是否关闭
className	string	否	-	类名

事件

事件名	说明	类型
onClose	Toast 关闭后的回调	`(e) => void`

样式类

类名	说明
amd-toast-wrapper	整体样式
amd-toastWithIcon-wrapper	带有 Icon 时整体样式
amd-toast-icon	Icon 样式

代码示例

基本使用

index.axml 代码示例如下：

<button onTap="handleShowToast" data-index="1" class="button" inline="{{true}}" inlineSize="{{medium}}">
  纯文字 toast
</button>

<button onTap="handleShowToast" data-index="4" class="button" inline="{{true}}" inlineSize="{{medium}}">
  纯文字 toast，文案过长
</button>

<button onTap="handleShowToast" data-index="2" class="button" inline="{{true}}" inlineSize="{{medium}}">
  自定义Icon
</button>

<button onTap="handleShowToast" data-index="5" class="button" inline="{{true}}" inlineSize="{{medium}}">
  自定义图片
</button>

<button onTap="handleShowToast" data-index="3" class="button" inline="{{true}}" inlineSize="{{medium}}">
  提示持续3s
</button>

<button onTap="handleShowToast" data-index="6" class="button" inline="{{true}}" inlineSize="{{medium}}">
  type = loading
</button>

<toast
  content="{{content1}}"
  visible="{{toast1Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="1"
  class="toastWrapper"
/>

<toast 
  content="{{content4}}"
  visible="{{toast4Show}}"
  data-index="4"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  class="toastWrapper"
/>

<toast
  content="{{content5}}"
  icon="{{icon2}}"
  visible="{{toast2Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="2"
  class="toastWrapper"
/>

<toast
  content="{{content2}}"
  image="{{image1}}"
  visible="{{toast5Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="5"
  class="toastWrapper"/>

<toast
  content="{{content3}}"
  visible="{{toast3Show}}"
  duration="{{3000}}"
  class="toastWrapper"
  data-index="3"
  onClose="handleCloseToast"
  showMask="{{true}}"
  maskCloseable="{{true}}"
/>

<toast
  content="{{content2}}"
  visible="{{toast6Show}}"
  class="toastWrapper"
  data-index="6"
  type="loading"
  onClose="handleCloseToast"
  showMask="{{true}}"
  duration="{{0}}"
  maskCloseable="{{true}}"
/>

index.js 代码示例如下：

Page({
  data: {
    toastShow: false,
    content1: "最长文案超过2行，最多可以显示24个字符。",
    content2: "加载中",
    content3: "这个提示持续时间3s",
    content4: "这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案",
    content5: "欢迎使用新版本",
    toast1Show: false,
    toast2Show: false,
    toast3Show: false,
    toast4Show: false,
    toast5Show: false,
    toast6Show: false,
    icon2: "LikeOutline",
    image1: 'https://gw.alipayobjects.com/mdn/rms_5118be/afts/img/A*4NPGQ66arP0AAAAAAAAAAAAAARQnAQ'
  },

  handleShowToast(e) {
    const { index }  = e.target.dataset;
    this.setData({
      toast1Show: false,
      toast2Show: false,
      toast3Show: false,
      toast4Show: false,
      toast5Show: false,
      toast6Show: false,
    })

    this.setData({
      [`toast${index}Show`]: true
    })

    console.log(this.data)
  },

  handleCloseToast(e) {
    const { index }  = e.target.dataset;
    this.setData({
      [`toast${index}Show`]: false
    })
  }
});

index.acss 代码示例如下：

.toastWrapper {

}

.image {
  width: 80rpx;
  height: 80rpx;
}

.button {
  margin-left: 12px;
}

index.json 代码示例如下：

{
  "defaultTitle": "Toast",
  "usingComponents": {
    "toast": "antd-mini/es/Toast/index",
    "button": "antd-mini/es/Button/index"
  }
}