项目场景:

使用 uni-app + uview-ui 开发小程序

问题描述:

使用 uni-app 开发小程序,不管是使用微信小程序的 wx.showToast() API 或 uni-app的 uni.showToast() API 显示消息提示框,显示图标 title 文本最多显示 7 个汉字长度,在不显示图标的情况下,大于两行不显示。


解决方案:

如果要显示超过两行的文本,使用 uview-ui 框架的 Toast 消息提示组件,这个组件表现形式类似 uni 的 uni.showToast API ,但是也有不同。

使用时需要在 html 部分先引入组件:

<template>
	<view>
		<u-toast ref="uToast" />
	</view>
</template>

js 部分:

<script>
	export default {
		onReady() {
			this.$refs.uToast.show({
				title: '通过ref调用"<toast/>"组件内部的show方法时,还可以传递其他参数, show方法是通过ref调用的, 注意:所有有关ref的调用,都不能在页面的onLoad生命周期调用,因为此时组件尚未创建完毕,会报错,应该在onReady生命周期调用。',
				duration: 6000
			})
		},
		methods: {
			showToast() {
				
			}
		}
	}
</script>

uView 的 toast 有 5 种主题可选
还可以配置 toast 结束后,跳转相应 URL

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐