uniapp交互反馈

本文主要是介绍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，其中包含用户选择的信息。

这篇关于uniapp交互反馈的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---