uniapp交互反馈

news/2025/1/25 2:49:28/

页面交互反馈可以通过: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,其中包含用户选择的信息。
文章来源:https://blog.csdn.net/a1241436267/article/details/141907190
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/1521411.html

相关文章

[代码已更新]2024数学建模国赛高教社杯C题:农作物的种植策略 思路代码文章助攻手把手保姆级

本系列专栏将包括两大块内容 第一块赛前真题和模型教学,包括至少8次真题实战教学,每期教学专栏的最底部会提供完整的资料百度网盘包括:真题、数据、可复现代码以及文章. 第二块包括赛中思路、代码的参考助攻, 会提供2024年高教社国赛C的全套参考内容(python 以及matlab 两种)(一…

ARM发布新一代高性能处理器N3

简介 就在2月21日&#xff0c;ARM发布了新一代面向服务器的高性能处理器N3和V3&#xff0c;N系列平衡性能和功耗&#xff0c;而V系列则注重更高的性能。此次发布的N3&#xff0c;单个die最高32核&#xff08;并加入到CCS&#xff0c;Compute Subsystems&#xff0c;包含Core&a…

【Linux】Shell 与权限:Linux 系统的双重保障

欢迎来到 CILMY23 的博客 &#x1f3c6;本篇主题为&#xff1a;Shell 与权限&#xff1a;Linux 系统的双重保障 &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Linux | 算法专题 …

linux基础IO——动静态库——实现与应用学习、原理深入详解

前言&#xff1a;本节内容是基础IO部分的动静态库。 本节内容&#xff0c; 我们将站在实现者的角度上自己实现一下动静态库&#xff0c; 并且会站在使用者的角度上使用我们自己实现的库。过程中牵扯到许多新的知识&#xff0c; 最后我们会重谈一下我们的进程。 理解一下有了动静…

window 更改Jupyter Notebook默认工作路径

在 Windows 上更改 Jupyter Notebook 的默认工作路径可以通过以下步骤进行&#xff1a; 方法 1: 修改 Jupyter 配置文件 生成 Jupyter 配置文件&#xff08;如果尚未生成&#xff09;&#xff1a; 打开 命令提示符&#xff08;cmd&#xff09;或 PowerShell。 输入以下命令并…

uniapp二维码生成

uniapp二维码生成 参考文档依赖引入代码html部分生成代码&#xff08;vue3 hook&#xff09;使用 参考文档 【博主&#xff1a;ChoneyLove】uniapp中生成二维码及解决微信小程序端问题总结 依赖引入 npm i uqrcodejs代码 html部分 <canvas type"2d" id"…

VBA 根据单元格改变的值改变对应单元格的值

VBA 根据单元格改变的值改变对应单元格的值 Private Sub Worksheet_Change(ByVal Target As Range)10 On Error GoTo er:20 Application.EnableEvents False30 If Intersect(Target, Range("I6")) Is Nothing False Then Range("I6").For…

9月5日复盘日记

9月5日复盘日记 前言今日感恩今日知识今日反思今日名言 前言 昨天空了一天没有进行复盘&#xff0c;但其实昨天效率也挺高&#xff0c;进行了实验的完善、审稿还有每日leetcode的刷题。但为什么昨天不进行记录呢&#xff0c;因为昨天心情比较一般&#xff0c;一整天总感觉有点浮…