项目场景:
使用 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