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>

uni.showModal

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm

<template>
	<view>
		<button @click="showModal()">showModal</button>
	</view>
</template>

<script setup>
	var showModal = () => {
		uni.showModal({
			title: '提示', // 弹窗标题
			content: '这是一个示例内容', // 弹窗主要信息
			confirmText: '确定', // 确定按钮的文字，默认为"确定"
			cancelText: '取消', // 取消按钮的文字，默认为"取消"
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					// 在这里处理用户点击确定后的逻辑
				} else {
					console.log('用户点击取消');
					// 在这里处理用户点击取消后的逻辑
				}
			},
			fail: function(err) {
				console.error('显示模态框失败:', err);
			}
		});

	}
</script>

---

参数说明

• title: 弹窗标题，字符串类型。

• content: 弹窗内容，字符串类型。

• confirmText: 确认按钮文字，默认是"确定"。

• cancelText: 取消按钮文字，默认是"取消"。

• success: 接口调用成功的回调函数，参数 res 包含 confirm 和 cancel 两个属性，分别对应用户点击了确定和取消按钮。

• fail: 接口调用失败的回调函数。

  ---

uni.showActionSheet

是一个用于在小程序或框架中弹出一个动作菜单的方法。这个方法接受一个配置对象 OBJECT，该对象包含了动作菜单的相关设置。

uni.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'], // 显示的按钮列表
  itemColor: '#007AFF', // 按钮的文字颜色
  cancelText: '取消', // 取消按钮的文字
  success: function(res) {
    if (res.tapIndex >= 0) {
      console.log('用户选择了第 ' + (res.tapIndex + 1) + ' 个选项');
      // 根据 res.tapIndex 执行相应操作
    }
  },
  fail: function(err) {
    console.error('显示操作菜单失败:', err);
  }
});

具体来说，uni.showActionSheet 的参数 OBJECT 包含以下属性：

• itemList：数组类型，表示显示的按钮列表。
• itemColor：字符串类型，表示按钮的文字颜色。
• cancelText：字符串类型，表示取消按钮的文字。
• success ：回调函数，当用户选择某个选项时触发。回调函数会传递一个参数 res，其中包含用户选择的信息。