uniapp中常用的几种提示弹框

 更新时间:2022年09月16日 09:57:12   作者:薇森  
在前端开发中,为了优化用户的交互体验,常需要用到弹窗来进行提示,引导用户操作,下面这篇文章主要给大家介绍了关于uniapp中常用的几种提示弹框的相关资料,需要的朋友可以参考下

一、成功提示弹框

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

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常用提示弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • console.log()的作用与实现方式

    console.log()的作用与实现方式

    这篇文章主要介绍了console.log()的作用与实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • JavaScript 深层克隆对象详解及实例

    JavaScript 深层克隆对象详解及实例

    这篇文章主要介绍了 JavaScript 深层克隆对象的相关资料,并附实例代码,帮助大家学习参考这部分知识,需要的朋友可以参考下
    2016-11-11
  • JS中完美兼容各大浏览器的scrolltop方法

    JS中完美兼容各大浏览器的scrolltop方法

    最近用到scrolloTop()想去获取滚动条距离顶部的距离,结果只有chrome下面可以正常的获取scrollTop,ff和ie下这个值都等于0,使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题,今天我们就来详细探讨下。
    2015-04-04
  • 如何从零开始利用js手写一个Promise库详解

    如何从零开始利用js手写一个Promise库详解

    ES2015 推出了JS 的 Promise ,而在没有原生支持的时候,我们也可以使用诸如 Promises/A+ 的库的帮助,在我们的代码里实现Promise 的支持,下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关资料,需要的朋友可以参考下。
    2018-04-04
  • 使用next.js开发网址缩短服务的方法

    使用next.js开发网址缩短服务的方法

    这篇文章主要介绍了使用next.js开发网址缩短服务,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 学习Javascript面向对象编程之封装

    学习Javascript面向对象编程之封装

    这篇文章主要帮助大家学习Javascript面向对象编程之封装,由浅入深的介绍了封装的概念定义,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS计算斐波拉切代码实例

    JS计算斐波拉切代码实例

    这篇文章主要介绍了js计算斐波拉切,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

    JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

    这篇文章主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 微信提示 在浏览器打开 效果实现过程解析

    微信提示 在浏览器打开 效果实现过程解析

    这篇文章主要介绍了微信提示 在浏览器打开 效果实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript中匿名函数用法实例

    JavaScript中匿名函数用法实例

    这篇文章主要介绍了JavaScript中匿名函数用法,实例分析了javascript中匿名函数的功能、定义及具体用法,需要的朋友可以参考下
    2015-03-03

最新评论