uniapp交互反馈

页面交互反馈可以通过: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

注意事项

1. 确保成对使用: 确保每次调用 uni.showLoading 后都有相应的 uni.hideLoading 调用来隐藏加载提示框。

2. 避免重复显示: 如果在同一个异步操作中多次调用 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>