Toast 消息提示

Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的 API。

注意：

由于 uni 中无法通过 js 创建元素，所以需要在页面中调用<toast />组件，再通过ref开启

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

以下为不同能力的 toast 的具体表现

<template>
  <view>
    <up-toast ref="uToast"></up-toast>
    <up-cell-group title-bg-color="rgb(243, 244, 246)">
      <up-cell
        :titleStyle="{fontWeight: 500}"
        :title="item.title"
        v-for="(item, index) in list"
        :key="index"
        isLink
        :icon="item.iconUrl"
        @click="showToast(item)"
      >
      </up-cell>
    </up-cell-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        list: [
          {
            type: "default",
            title: "默认主题",
            message: "锦瑟无端五十弦",
            iconUrl: "https://xxx.com/demo/toast/default.png",
          },
          {
            type: "error",
            icon: false,
            title: "失败主题",
            message: "一弦一柱思华年",
            iconUrl: "https://xxx.com/demo/toast/error.png",
          },
          {
            type: "success",
            title: "成功主题(带图标)",
            message: "庄生晓梦迷蝴蝶",
            iconUrl: "https://xxx.com/demo/toast/success.png",
          },
          {
            type: "loading",
            title: "正在加载",
            message: "正在加载",
            iconUrl: "https://xxx.com/demo/toast/loading.png",
          },
          {
            type: "default",
            title: "结束后跳转标签页",
            message: "此情可待成追忆",
            url: "/pages/componentsB/tag/tag",
            iconUrl: "https://xxx.com/demo/toast/jump.png",
          },
        ],
      };
    },
    computed: {
      getIcon() {
        return (path) => {
          return "https://xxx.com/example/" + path + ".png";
        };
      },
    },
    methods: {
      showToast(params) {
        this.$refs.uToast.show({
          ...params,
          complete() {
            params.url &&
              uni.navigateTo({
                url: params.url,
              });
          },
        });
      },
    },
  };
</script>
<style>
.u-page {
  padding: 0;
}

.u-cell-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
}

.u-cell-group__title__text {
  font-weight: bold;
}
</style>

此页面源代码地址

页面源码地址

 github  gitee

API

Params

这些参数为通过ref调用<toast/>组件内部的show方法时，需要传递参数

参数	说明	类型	默认值	可选值
loading	是否加载中	Boolean	false	true
message	显示的文本	String | Number	-	-
icon	图标，或者绝对路径的图片	String	-	-
position	toast 出现的位置	String	center	top / bottom
type	主题类型	String	-	-
params	跳转的参数	Object	-	-
duration	展示时间，单位 ms	String | Number	2000	-
complete	执行完后的回调函数	Function	null	-

Methods

方法是通过ref调用的，参见上方说明 注意：所有有关ref的调用，都不能在页面的onLoad生命周期调用，因为此时组件尚未创建完毕，会报错，应该在onReady生命周期调用。

方法名	说明	参数	版本
show	显示 toast，如需一进入页面就显示 toast，请在onReady生命周期调用	见上方说明	-