uniapp交互反馈

news2024/9/20 18:44:17

页面交互反馈可以通过: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.coloradmin.cn/o/2108605.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】多线程:POSIX库、线程管理、线程ID

目录 一、POSIX线程库 二、线程ID 三、动态库加载 四、再谈线程ID 一、POSIX线程库 原生库&#xff1a;指的是操作系统自带的库&#xff0c;如POSIX线程库&#xff0c;在类Unix系统中通常是原生支持的。这些库是操作系统的一部分&#xff0c;提供了系统级的线程管理功能。 …

基于人工智能的植物病害检测系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 植物病害的早期检测对于农业生产至关重要&#xff0c;它有助于及时采取措施防止病害扩散&#xff0c;减少作物损失。通过人工智能技术…

css问题:display:flex布局+justify-content: space-between; 最后一行不能左对齐

解决方法1&#xff1a; display: flex;margin: 10px var(--leftRight); --leftRight&#xff1a; 动态计算一行减去item的宽度后剩下的间距 解决方法2&#xff1a;网格布局 display: grid;grid-template-columns: repeat(5, 1fr);margin: 10px auto; 完整代码&#xff1a; &l…

C++ 继承学习笔记

1.继承概念 继承 (inheritance) 机制是面向对象程序设计 使代码可以复用 的最重要的手段&#xff0c;它允许程序员在 保 持原有类特性的基础上进行扩展 &#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承 呈现了面向对象 程序设计的层次结构 &#xf…

奥威让您更懂现金流情况

企业现金流一旦出了问题都是大问题&#xff0c;会直接影响到企业的日常运作&#xff0c;甚至直接关系到企业能不能继续存活&#xff0c;因此现金流量表是企业财务分析中重要报表之一&#xff0c;也是企业监控财务监控情况的重要手段之一。那么这么重要的一份现金流量表该怎么做…

科研绘图系列:R语言折线图(linechart plots)

文章目录 介绍加载R包导入数据数据预处理画图组合图形介绍 在R语言中,折线图(Line Plot)是一种常用的数据可视化类型,用于展示数据随时间或有序类别变化的趋势。折线图通过连接数据点来形成一条或多条线,这些线条可以清晰地表示数据的变化方向、速度和模式。 加载R包 k…

基于Spring Boot的宠物领养系统的设计与实现

基于Spring Boot的宠物领养系统的设计与实现 springboot138宠物领养系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一…

第 1 章:原生 AJAX

原生AJAX 1. AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据。AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一…

JavaWeb案例

环境搭建 先创建好数据库&#xff0c;建表并插入数据 create database talis; use talis;-- 部门管理 create table dept(id int unsigned primary key auto_increment comment 主键ID,name varchar(10) not null unique comment 部门名称,create_time datetime not null com…

Springboot整合【Kafka】

1.添加依赖 在pom.xml文件中添加以下依赖&#xff1a; <!-- 进行统一的版本管理--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.3.3</version>&l…

【全网最全】2024年数学建模国赛A题30页完整建模文档+成品论文+代码+可视化图表等(后续会更新)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片&#xff0c;那是获取资料的入口&#xff01; 2024年高教社杯数学建模国赛A题“板凳龙”闹元宵&#xff1a;建立舞龙队的运动轨迹和速度的空间几何、运动学和优化模型 本文文章较长&#xff0c;建议先看…

ardupilot开发 --- MQTT 篇

原图&#xff1a;ardupilot-onboardComputer-4Glink-console.drawio 白嫖党请点赞、收藏、关注 你说在一起要算命 前言参考文献 前言 为什么在ardupilot开发过程中要用到MQTT &#xff1f; 客户要求向他们的指挥中心平台推送视频流和飞控数据&#xff0c;即要将图数传数据推送给…

代码随想录:96. 不同的二叉搜索树

96. 不同的二叉搜索树 class Solution { public:int numTrees(int n) {int dp[30]{0};//由i个结点组成的二叉搜索树有多少种dp[0]1; for(int i1;i<n;i)for(int j0;j<i;j)//j表示根节点左子树有j个结点dp[i]dp[j]*dp[i-j-1];//对根节点左右子树结点数量遍历//数量有左子树…

【计算机网络】TCP连接如何确保传输的可靠性

一、确保可靠传输的机制 TCP&#xff08;传输控制协议&#xff09;是一种面向连接的、提供可靠交付的、面向字节流的、支持全双工的传输层通信协议 1、序列号 seq TCP头部中的序号&#xff0c;占32位&#xff08;4字节&#xff09;&#xff1b; 发送方给报文段分配一个序列号&a…

CSS中 特殊类型的选择器 伪元素如何使用

一、什么是伪元素 在 CSS 中&#xff0c;伪元素是一种特殊类型的选择器&#xff0c;它允许你为元素的特定部分添加样式&#xff0c;而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果&#xff0c;如添加边框、背景、阴影等&#xff0c;而不需要额外的 HTML…

PHPJWT的使用

今天得空整理整理JWT的代码 首先&#xff0c;我们得知道什么是JWT&#xff1f; JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC7519&#xff09;&#xff0c;用于在网络应用环境中安全地传输声明信息。它是一种紧凑的、URL安全的令牌格式&#xff0…

(一)使用Visual Studio创建ASP.NET Core WebAPI项目

1.创建webAPI项目 选择ASP.NET Core Web API项目模版&#xff08;基于.Core框架可以支持多种系统环境&#xff0c;所以我们选择.Core框架&#xff09;&#xff0c;点下一步。 2.项目名称 项目名称设置为&#xff1a;CoreWebAPI&#xff0c;点下一步 3.选择框架 选择.NET6.0框…

分类预测|基于黑翅鸢优化轻量级梯度提升机算法数据预测Matlab程序BKA-LightGBM多特征输入多类别输出 含对比

分类预测|基于黑翅鸢优化轻量级梯度提升机算法数据预测Matlab程序BKA-LightGBM多特征输入多类别输出 含对比 文章目录 一、基本原理BKA&#xff08;Black Kite Algorithm&#xff09;的原理LightGBM分类预测模型的原理BKA与LightGBM的模型流程总结 二、实验结果三、核心代码四、…

IP学习——twoday

双层Vlan标签 路由器常用命令&#xff1a; 查看当前端口&#xff0c;路由等的信息和配置&#xff1a;display this 查看当前路由器的所有信息&#xff1a; display current-configuration 查看当前路由器的指定信息&#xff1a; display current-configuration | include ip a…

HTML第一课 语法规范与常用标签

目录 ◆ HTML 语法规范 ◆ HTML 常用标签 4.2 标题标签 4.3 段落和换行标签 4.4文本格式化标签 4.5<div>和<span>标签 4.6图像标签和路径 4.7超链接标签 1.外部链接 2.内部链接 3.空链接 4.下载链接 5.锚点链接 ◆ HTML 中的注释和特殊字符​编辑 ◆ HTML 语…