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

这篇具有很好参考价值的文章主要介绍了uniapp中uview组件库Toast 消息提示 的使用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp中uview组件库Toast 消息提示 的使用方法,uniapp,uni-app,前端

目录

#基本使用

#配置toast主题

#toast结束跳转URL

#API

#Props

#Params

#Methods


此组件表现形式类似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生命周期调用。文章来源地址https://www.toymoban.com/news/detail-808095.html

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

到了这里,关于uniapp中uview组件库Toast 消息提示 的使用方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp中uview组件库丰富的CountTo 数字滚动使用方法

    目录 #平台差异说明 #基本使用 #设置滚动相关参数 #是否显示小数位 #千分位分隔符 #滚动执行的时机 #API #Props #Methods #Event 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。 注意 如果给组件的父元素设置 text-align: center 想让数字水平居中,可能是由

    2024年02月02日
    浏览(46)
  • uniapp中uview组件库丰富的Table 表格的使用方法

    目录 #平台差异说明 #基本使用 #兼容性 #API #Table Props #Td Props #Th Props 表格组件一般用于展示大量结构化数据的场景 #平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ #基本使用 本组件标签类似HTML的table表格,由 table 、 tr 、

    2024年02月02日
    浏览(53)
  • uniapp中uview组件库丰富的CountDown 倒计时使用方法

    目录 #平台差异说明 #基本使用 #设置是否显示天,时,分,秒 #倒计时分隔符 #倒计时样式 #倒计时执行的时机 #如何获取当前倒计的秒数 #API #Props #Events #Methods 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作

    2024年02月02日
    浏览(38)
  • uniapp全局挂载uViewUI的u-toast消息通知组件(微信小程序)

    在使用uView消息通知组件的时候,必须在每个页面中手动添加一个标签,打上ref然后才能调用,非常的麻烦,能不能像ElementUI那样把组件挂载到Vue原型上从而能全局调用呢,个人也是尝试了很多方法,但是由于小程序的app.vue不能写页面,所以无法达到ElementUI那种方便的效果,

    2024年02月15日
    浏览(42)
  • 【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示

    使用 Toast 轻提示 和 Notify 消息提示 时没有样式,如下图 引入所需的样式,例如: 我要使用 消息提示 (Notify),就引入 import \\\'vant/es/notify/style\\\' 我要使用 轻提示 (Toast),就引入 import \\\'vant/es/toast/style\\\' HomeView.vue End 2023/3/7 一改 【Vue3】vue3的keepAlive保存滚动位置 CKEditor5 添加代码高亮

    2023年04月18日
    浏览(44)
  • uniapp初体验———uView组件库的使用与钉钉小程序的运行

                这周学长给了我一个校企合作的项目,要求是用uniapp开发,最终打包成钉钉小程序,不过我并不会uniapp,也是学了一段时间,开始写项目,中间也遇到过很多问题,比如开发者工具还有如何运行到开发者工具以及组件库的使用,这些虽然都是一些基础的问题

    2024年02月14日
    浏览(44)
  • 【uniapp中的uview组件u-notice-bar的使用之踩坑】

    使用uniapp开发 的H5和微信小程序,在HbuilderX上进行编写和运行,整体效果图如下: H5(效果正确) 这个效果是正常的没有问题 ,一进入首页就回正常跑 微信小程序(有问题) 这张图就可以看你出来,文字不会正常运行,后来根据不断的对比我发现是因为在组件上有一个 style

    2024年02月11日
    浏览(39)
  • uniapp 微信小程序使用uview u-tabbar组件自定义tabbar

    1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot=\\\'inactive-icon\\\'(选中的图标)和slot=\\\'inactive-icon\\\'(未选中的图标)自定义图片样式 u-tabbar组件默认已经为i

    2024年02月13日
    浏览(69)
  • uniapp中使用uview组件u-icon 编辑到微信小程序样式问题

    在微信小程序中用u-icon标签选择器才能对其设置样式,但在h5预览中u-icon{ }这样设置样式不生效,用组件的customStyle属性才生效。所以干脆对不同平台用不同写法: 同时在style标签里使用u-icon选择器写样式来作用于微信小程序中: 这样互不影响

    2024年02月16日
    浏览(58)
  • uniapp开启消息通知/提示(使用uniPush)

    亲爱的小伙伴们,最近对uniPush有稍许研究,当前研究出一些心得,现在分项给大家,希望对大家的uniapp之路有所帮助。本次的教程是教会你如何使用uniPush自定义消息通知,同时还附带添加消息提示音添加,多的不说少的不唠,下边就让我来给你们分享一下我的经验吧。 开发

    2024年02月16日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包