返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp中常用的几种提示弹框
  • 506
分享到

uniapp中常用的几种提示弹框

2024-04-02 19:04:59 506人浏览 八月长安
摘要

目录一、成功提示弹框二、加载提示弹框三、确认取消提示框 四、列表选择提示弹框五、自定义图标 总结 一、成功提示弹框 在执行增、删、改、查等提交成功后弹出

一、成功提示弹框

在执行增、删、改、查等提交成功后弹出提示。

uni.showToast({
	title: '成功提示',
	//将值设置为 success 或者直接不用写icon这个参数
	icon: 'success',
	//显示持续时间为 2秒
	duration: 2000
})  

效果如下:

若icon参数值设置为none,将不显示“√”图标,只显示文字提示。

uni.showToast({
	title: '成功提示',
	icon: 'none',
	duration: 2000
})  

效果如下:

二、加载提示弹框

 在执行数据查询、页面数据渲染等过程中弹出提示。以页面渲染为例:

//前端数据请求时,显示加载提示弹框
uni.showLoading({
	title: '加载中...'
});
// 数据从后端接口返回后,提示弹框关闭
uni.hideLoading();

效果如下:

同上,设置icon参数值为none,将不显示加载图标,只显示文字提示。 

三、确认取消提示框 

在执行数据删除等操作时弹出提示。 

uni.showModal({
		title: '提示',
		content: '确认删除该条信息吗?',
		success: function(res) {
		if (res.confirm) {
		    // 执行确认后的操作
		} 
		else {
			// 执行取消后的操作
		}
	}
})

 效果如下:

 自定义取消、确认的内容(参数:cancelText、confirmText)以及字体颜色(confirmColor、cancelColor)。

uni.showModal({
		title: '提示',
		// 提示文字
		content: '确认删除该条信息吗?',
		// 取消按钮的文字自定义
		cancelText: "取消",
		// 确认按钮的文字自定义
		confirmText: "删除",
		//删除字体的颜色
		confirmColor:'red',
		//取消字体的颜色
		cancelColor:'#000000',
		success: function(res) {
		if (res.confirm) {
			// 执行确认后的操作
		} 
		else {
			// 执行取消后的操作
		}
	}
})

 效果如下:

四、列表选择提示弹框

 执行某些列表选择时弹出提示。

uni.showActionSheet({
	itemList: ['选项一', '选项二', '选项三'],
	success (res) {
	   // 选择其中任意一项后,获取其索引(res.tapindex),从0开始
	   console.log(res.tapIndex) 
	},
	fail (res) {
	   // 取消后的操作
	}
})

效果如下:

 若需要设置字体颜色,可以配置itemColor参数。

uni.showActionSheet({
	itemList: ['选项一', '选项二', '选项三'],
    // 字体颜色
	itemColor: "#55aaff",
	success (res) {
	   // 选择其中任意一项后,获取其索引(res.tapIndex),从0开始
	   console.log(res.tapIndex) 
	},
	fail (res) {
	   // 取消后的操作
	}
})

效果如下:

五、自定义图标 

可以自定义显示图标,如png、jpg、gif等格式。

uni.showToast({
	title: '查询中',
	//图片位置
	image: '../../static/loading.gif',
	duration: 2000    
})

 效果如下:

总结 

到此这篇关于uniapp中常用的几种提示弹框的文章就介绍到这了,更多相关uniapp常用提示弹框内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uniapp中常用的几种提示弹框

本文链接: https://lsjlt.com/news/167707.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp中常用的几种提示弹框
    目录一、成功提示弹框二、加载提示弹框三、确认取消提示框 四、列表选择提示弹框五、自定义图标 总结 一、成功提示弹框 在执行增、删、改、查等提交成功后弹出...
    99+
    2024-04-02
  • 如何实现微信小程序中几种常见的弹框提示信息
    这篇文章给大家分享的是有关如何实现微信小程序中几种常见的弹框提示信息的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、模态窗口 delete(){  &nbs...
    99+
    2024-04-02
  • 微信小程序几种常用弹窗提示方法
    1.提示文字 可以设置显示时间(仅提示时使用)duration设置时间 不显示icon,此时 title文字最多可显示两行 也可以显示icon,显示icon文字最多显示 7 个汉字长度 icon常用的有:success、error、l...
    99+
    2023-08-31
    微信小程序 小程序
  • JavaScript常用的3种弹出框(提示框 alert/确认框 confirm/输入框 prompt)
    目录1、提示框 alert2、确认框 confirm3、输入框 prompt1、提示框 alert // 没有返回值 alert('你好'); 2、确认框 confirm // 返...
    99+
    2024-04-02
  • Android studio 提示框Toast 弹出框AlertDialog 多种提示方法
    1、Toast Handler handler = new Handler(Looper.getMainLooper()); handler....
    99+
    2022-06-06
    Android Studio studio 方法 alertdialog toast Android
  • Android Studio中实现弹出提示框的两种方法
    Android Studio中实现弹出提示框的两种方法 在Android开发过程中,经常需要使用弹出提示框来向用户展示信息或者获取用户的输入。在Android Studio中,我们可以通过两种方法来实...
    99+
    2023-10-04
    android studio android ide Android
  • Bootstrap中弹出框和提示框的示例分析
    这篇文章将为大家详细讲解有关Bootstrap中弹出框和提示框的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功...
    99+
    2023-06-15
  • 聊聊Vue提示框设置时间的几种方法
    Vue是一种流行的JavaScript框架,用于构建现代和交互式的Web应用程序。提示框是一个常用的UI组件,可以帮助用户在需要时快速了解信息。在Vue中,可以使用各种库和组件来创建提示框,其中包括一些具有时间参数的选项。本文将讨论Vue提...
    99+
    2023-05-14
  • iwebshop框架用到的几种常用sql处理
    query 查询类标签(用于前端遍历)实例:{query:name=goods}{$item['name']}<br/>{/query}本人实际开发中书写代码应用:<php &n...
    99+
    2024-04-02
  • 浅析Android中常见三种弹框在项目中的应用
    一丶概述 弹框在Android项目中经常出现,常见的实现方法有三种:Dialog 弹框,Window弹框,Activity伪弹框。本文就说一说三种弹框的实现及在项目中的运用。 ...
    99+
    2022-06-06
    Android
  • uniapp中的picker选择器的几种使用场景
    目录一、普通选择器二、多列选择器三、时间选择器四、日期选择器一、普通选择器 <template> <view> <picker @change=...
    99+
    2024-04-02
  • android 弹出提示框的使用(图文实例)
    代码如下://删除全部 else if(id==R.id.btnDelet){ new AlertDialog.Builder(this).setTitle("删除提示框"...
    99+
    2022-06-06
    Android
  • JavaScript几种弹窗事件的使用
    目录一、弹窗事件是什么?二、简述几种弹窗的使用1.警告框2.选择框3.信息录入框一、弹窗事件是什么? 弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗...
    99+
    2024-04-02
  • 聊聊几种常用的PHP框架及其区别
    PHP框架是广泛应用于Web开发中的工具,以其良好的结构、清晰的模块化特性和简单的使用方式而受到开发者们的喜爱。每种框架都有其自身的优缺点和适用范围,本文将介绍几种常用的PHP框架及它们之间的区别。LaravelLaravel是一款优秀的P...
    99+
    2023-05-14
  • Android开发基础 几种常用对话框的使用
    Android开发基础 几种常用对话框的使用 开发步骤如下:(1)布局界面(2)获取按钮,添加事件监听器,实现对话框 。 我采用的是Relati...
    99+
    2022-06-06
    android开发 Android
  • 几种常用的CSS居中方法
    CSS居中的方法,是网页制作中非常基础的技术之一。无论是居中文字还是图片,都可以通过简单的CSS代码来实现。下面,我们将介绍几种常用的CSS居中方法。一、居中一个div要把一个div居中,我们可以使用以下的CSS代码:div { w...
    99+
    2023-05-14
  • Python几种比较常见的测试框架
    python 几种常见的测试框架 unittest 参考文档: https://docs.python.org/3/library/unittest.html unittest笔记 The unittest unit test...
    99+
    2023-01-31
    几种 框架 常见
  • php弹出提示框中文乱码的解决方法
    这篇文章给大家分享的是有关php弹出提示框中文乱码的解决方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。php弹出提示框中文乱码的解决办法就是在alert前面加一句编码输出语句为“header("Co...
    99+
    2023-06-20
  • uniapp中实现换行替换的几种方法
    在进行uniapp开发的时候,我们常常需要对文字的显示做一些特殊的处理。其中一个常见的问题是如何实现换行替换。在这篇文章中,我们将介绍uniapp中实现换行替换的几种方法。使用正则表达式首先,我们可以使用正则表达式来进行换行替换。具体的代码...
    99+
    2023-05-14
  • 关于使用pyqt弹出消息提示框的问题
    目录安装 pyqt安装遇到问题还有 To avoid this problem you can invoke Python with '-m pip' instead...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作