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,其中包含用户选择的信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/873387.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++进阶】hash表的封装

文章目录 hash表哈希表的关键组成部分哈希表的优缺点优点&#xff1a;缺点&#xff1a; 常见应用场景 开放定址法实现hash表负载因子 (Load Factor)负载因子的意义负载因子的影响再散列 (Rehashing)示例 整体框架insertFinderasehash桶封装框架insertfinderase~HashTable() 总结…

Apache ShardingSphere数据分片弹性伸缩加解密中间件

Apache ShardingSphere Apache ShardingSphere 是一款分布式 SQL 事务和查询引擎,可通过数据分片、弹性伸缩、加密等能力对任意数据库进行增强。 软件背景 ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈,它由Sharding-JDBC、Sharding-Proxy和Sharding…

git 提交自动带上storyid

公司里的运维团队的产品经理&#xff0c;那老六提出说要在每个提交带上的jira storyid或者bugid&#xff0c;不用他自己弄不顾他人麻烦&#xff0c;真想问候他的xx。不过既然已经成为定局&#xff0c;还是想想有没有其他办法。经一番调研&#xff0c;网上有比较零碎的信息&…

Nginx 负载均衡+高可用 集群部署(Keepalived+LVS DR模式)

一、LVS负载均衡简介 1.1 LVS基本介绍 LVS&#xff08;Linux Virtual Server&#xff09;即Linux虚拟服务器&#xff0c;是由章文嵩博士主导开发的开源负载均衡项目&#xff0c;目前LVS已经被集成在Linux内核中。该项目在Linux内核中实现了基于IP地址的请求数据负载均衡调度方…

以太网交换机工作原理学习笔记

在网络中传输数据时需要遵循一些标准&#xff0c;以太网协议定义了数据帧在以太网上的传输标准&#xff0c;了解以太网协议是充分理解数据链路层通信的基础。以太网交换机是实现数据链路层通信的主要设备&#xff0c;了解以太网交换机的工作原理也是十分必要的。 1、以太网协议…

CTFHub技能树-Git泄漏-Stash

目录 一、前提知识 1.什么是git stash 2.git文件目录结构 3.git中对象指向 二、解题过程 方法一&#xff1a;使用GitHack 方法二&#xff1a;使用Git_Extract工具&#xff0c;这个是自动解析不用git stash等操作&#xff0c;直接得到flag 当前大量开发人员使用git进行版本…

SQL进阶技巧:截止当前批次前的批次量与订单量 | 移动窗口问题

目录 0 场景描述 1 数据准备 2 问题分析 3 小结 0 场景描述 表A有如下字段,user id(用户ID),batch id(批次ID),order id(订单ID),create time(创建时间),同一个用户ID下有多个批次,同一个批次下有多个订单ID,相同批次ID的创建时间是相同的,创建时间精确到了秒。 统计,截…

1-10 图像增强对比度 opencv树莓派4B 入门系列笔记

目录 一、提前准备 二、代码详解 enhanced_image cv2.convertScaleAbs(image, alpha1.5, beta0) 三、运行现象 四、完整工程贴出 一、提前准备 1、树莓派4B 及 64位系统 2、提前安装opencv库 以及 numpy库 3、保存一张图片 二、代码详解 import cv2 # 增强图像的对比度 …

【音视频】播放音视频时发生了什么? 视频的编解码 H264是什么? MP4是什么?

目录 ✨播放一个视频的流程✨为什么要编码&#xff08;压缩&#xff09;视频数据&#xff1f;✨如何编码&#xff08;压缩&#xff09;数据&#x1f384;简单的例子&#x1f384;音视频编码方式&#x1f384;视频编码格式H264编码是什么&#xff1f;发展历程&#xff1f;H.264基…

【Python游戏开发】拼图小游戏demo

使用mu编辑器 pgzero编写拼图小游戏 import randomSIZE 96 # 设置每张图块的大小 WIDTH SIZE * 3 # 根据土块大小设置窗口 HEIGHT SIZE * 3 pics [] # 存放图块 finished False # 游戏结束标识# 将前八张图块存放在pics列表中 for i in range…

009.Python爬虫系列_urllib模块案例

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈 PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)文章合集 👈👈 Oracle数…

传统CV算法——基于Opencv的多目标追踪算法

基于 OpenCV 的跟踪算法有多种&#xff0c;每种算法都有其特定的应用场景和优缺点。以下是一些常见的基于 OpenCV 的目标跟踪算法&#xff1a; 1. BOOSTING 跟踪器 描述&#xff1a;基于 AdaBoost 算法的跟踪器。它是一种早期的跟踪算法&#xff0c;使用的是基于弱分类器的强…

php转职golang第二期

以下是一份简单的 Go 基本语法笔记&#xff1a; 变量与常量&#xff1a; • var 声明变量。• const 声明常量。数据类型&#xff1a; • 整型、浮点型、布尔型、字符串型等。流程控制&#xff1a; • if-else 语句。• for 循环。函数&#xff1a; • 定义和调用函数。数…

Linux-【组管理、权限管理、定时任务调度】

目录 前言 Linux组基本介绍 文件/目录 所有者 查看文件 所有者 修改文件所有者 文件/目录 所在组 修改文件/目录 所在组 其它组 改变用户所在组 权限的基本介绍 rwx权限 rwx作用到文件 rwx作用到目录 修改权限 第一种方式&#xff1a;、-、变更权限 第二种方式…

系统编程--线程

这里写目录标题 线程概念什么是线程简介图解 内核原理图解 线程共享资源与非共享资源共享资源非共享资源 线程优缺点 线程控制原语pthread_self、pthread_create简介代码总结 循环创建多个子线程错误代码 线程间全局变量共享pthread_exit简介代码 一级目录二级目录二级目录二级…

可持久化Trie详解,最大异或和,k大异或和

零、碎碎念 打比赛没遇上可持久化Trie&#xff0c;做个CMU 15-445的project0&#xff0c;上来就碰上了…… 关于Trie详见&#xff1a;[Trie树/字典树的原理及实现C/C]_trie字典树原理-CSDN博客 一、可持久化Trie 1.1 基本思想 可持久化Trie和可持久化线段树类似&#xff0c…

白小白为波司登新品创作歌曲《登峰之路》,穿越风雨守护前行者

随着天气渐凉&#xff0c;波司登品牌推出全新新品——轻薄羽绒叠变系列&#xff0c;作为波司登品牌的新品推荐官&#xff0c;歌手白小白为波司登创作并演唱《轻薄羽绒叠变》系列主题曲《登峰之路》。歌曲中&#xff0c;白小白以激昂澎湃&#xff0c;明快有力的旋律以及深情又充…

[数据集][目标检测]西红柿缺陷检测数据集VOC+YOLO格式17318张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;17318 标注数量(xml文件个数)&#xff1a;17318 标注数量(txt文件个数)&#xff1a;17318 标…

【第0006页 · 数组】寻找重复数

【前言】本文以及之后的一些题解都会陆续整理到目录中&#xff0c;若想了解全部题解整理&#xff0c;请看这里&#xff1a; 第0006页 寻找重复数 今天想讨论的一道题在 LeetCode 上评论也是颇为“不错”。有一说一&#xff0c;是道好题&#xff0c;不过我们还是得先理解了它才…

【Unity小技巧】URP管线遮挡高亮效果

前言 在URP渲染管线环境下实现物体遮挡高亮显示效果&#xff0c;效果如下&#xff1a;Unity URP遮挡高亮 实现步骤 创建层级&#xff0c;为需要显示高亮效果的物体添加层级&#xff0c;比如Player 创建一个材质球&#xff0c;也就是高亮效果显示的材质球找到Universal Render…