页面交互反馈可以通过:uni.showToast(object)实现,常用属性有
ioc值说明
值 说明 success 显示成功图标,此时 title 文本在 小程序
平台最多显示 7 个汉字长度,App
仅支持单行显示。error 显示错误图标,此时 title 文本在 小程序
平台最多显示 7 个汉字长度,App
仅支持单行显示。fail 显示错误图标,此时 title 文本无长度显示。 exception 显示异常图标。此时 title 文本无长度显示。 loading 显示加载图标,此时 title 文本在 小程序
平台最多显示 7 个汉字长度。none 不显示图标,此时 title 文本在 小程序
最多可显示两
以下是不同值的效果图
除了使用系统提供的还可以使用自定义图标
案例代码
<template> <view class="content"> <button @click="showToast('success')">success</button> <button @click="showToast('error')">error</button> <button @click="showToast('fail')">fail</button> <button @click="showToast('exception')">exception</button> <button @click="showToast('loading')">loading</button> <button @click="showToast('none')">none</button> <button @click="myShowToast('自定义')">自定义</button> </view> </template> <script setup> var showToast = (str) => { uni.showToast({ title: str, icon: str }) } var myShowToast = (str) => { uni.showToast({ title: str, image:'/static/img/2.png' }) } </script>
uni.showLoading与uni.hideLoading
注意事项
确保成对使用: 确保每次调用
uni.showLoading
后都有相应的uni.hideLoading
调用来隐藏加载提示框。避免重复显示: 如果在同一个异步操作中多次调用
uni.showLoading
,可能会导致加载提示框无法正常隐藏。确保只在必要的地方调用。通过这种方式,可以有效地使用
uni.showLoading
和uni.hideLoading
来提高用户体验,确保用户在等待过程中得到及时反馈。
案例
<template> <view> <button @click="showLoading()">showLoading</button> <button @click="hideLoading()">hideLoading</button> </view> </template> <script setup> var showLoading = () => { uni.showLoading({ title: '加载中', }) } var hideLoading = () => { uni.hideLoading() } </script>