uniapp中uview组件库Toast 消息提示 的使用方法

简介: uniapp中uview组件库Toast 消息提示 的使用方法

此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方,具体表现在:

  • uView的toast有5种主题可选
  • 可以配置toast结束后,跳转相应URL
  • 目前没有加载中的状态,请用uni的uni.showLoading,这个需求uni已经做得很好

注意:

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

#基本使用

以下为一个模拟登录成功后,弹出toast提示,并在一定时间(默认2000ms)后,自动跳转页面到个人中心页(也可以配置跳转的参数)的示例

<template>
  <view>
    <u-toast ref="uToast" />
  </view>
</template>
 
<script>
  export default {
    methods: {
      showToast() {
        this.$refs.uToast.show({
          title: '登录成功',
          type: 'success',
          url: '/pages/user/index'
        })
      }
    }
  }
</script>

#配置toast主题

一共有6种主题可选,如下:

  • default-灰黑色,最普通的场景,此为默认主题,可以不用填type参数
  • error-红色,代表错误
  • success-绿色,代表成功
  • warning-黄色,代表警告
  • info-灰色,比default浅一点
  • primary-蓝色,uView的主色调

除了default状态,其他5种主题,都是默认带有一个左边的图标,可以通过配置icon参数为none来取消

this.$refs.uToast.show({
  title: '操作成功',
  // 如果不传此type参数,默认为default,也可以手动写上 type: 'default'
  // type: 'success', 
  // 如果不需要图标,请设置为false
  // icon: false
})

#toast结束跳转URL

  • 如果配置了url参数,在toast结束的时候,就会用uni.navigateTo(默认)或者uni.switchTab(需另外设置isTabtrue)
  • 如果配置了params参数,就会在跳转时自动在URL后面拼接上这些参数,具体用法如下:
this.$refs.uToast.show({
  title: '操作成功',
  url: '/pages/user/index',
  params: {
    id: 1,
    menu: 3
  }
})

#API

#Props

参数 说明 类型 默认值 可选值
z-index toast展示时的z-index String | Number 10090 -

#Params

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

参数 说明 类型 默认值 可选值
title 显示的文本 String - -
type 主题类型,不填默认为default String default primary / success / error / warning / info
duration toast的持续时间,单位ms Nubmer 2000 -
url toast结束跳转的url,不填不跳转,优先级高于back参数 String - -
icon 是否显示显示type对应的图标,为false不显示图标 Boolean true false
position toast出现的位置 String center top / bottom
callback 1.3.6 toast结束后执行的回调方法 Function - -
isTab toast结束后,跳转tab页面时需要配置为true Boolean false true
back 1.4.0 toast结束后,是否返回上一页,优先级低于url参数 Boolean false true

#Methods

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

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


相关文章
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
32 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
138 10
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
119 5
|
2月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
130 2
|
2月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
86 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
41 0
|
2月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
82 0
|
2月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
50 0
|
2月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
94 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
135 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)