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

赞 (0)

相关推荐

  • uniapp引入支付宝原生扫码插件步骤详解

    uniapp引入支付宝原生扫码插件步骤详解

    目录 1.打开插件市场 2.阿里云操作 开通阿里云 mPaaS 创建 mPaaS 应用 配置应用 3.配置项目 打开manifest.json 1.打开插件市场 链接:ext.dcloud.net.cn/plugin?id=2… 点击红色框按钮 绑定包名,这个包名与后续有关系,请记录下 2.阿里云操作 开通阿里云 mPaaS 打开mPaaS产品 创建 mPaaS 应用 创建一个应用效果如下 配置应用 点击你创建用的应用进去里面的配置页面 绑定刚才第一步我们绑定的包名,还有上次这个包名打包后的ap

  • uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off

    目录 注意事项 使用场景 1.在我的页面,监听事件 2.在登录页,触发事件 总结 uni.$emit(eventName,OBJECT) 触发全局的自定义事件.附加参数都会传给监听器回调. uni.$on(eventName,callback) 监听全局的自定义事件.事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数. uni.$once(eventName,callback) 监听全局的自定义事件.事件可以由 uni.$emit 触发,但是只触发一次,在第一次触

  • uniapp实现附近商家定位的示例代码

    uniapp实现附近商家定位的示例代码

    目录 一丶申请腾讯位置服务开发者密钥 二丶下载微信小程序JavaScriptSDK 三丶安全域名设置 四丶代码编写 4.1丶项目配置 4.2丶定义变量 4.3丶编写方法 4.4丶页面加载时调用 4.5丶数据展示 五丶真机调试效果图 有一个月没写博客了,最近在写项目,需要用到腾讯位置服务,获取附近商家位置.这里我就记录一下,实现过程. 一丶申请腾讯位置服务开发者密钥 申请地址:腾讯位置服务 - 立足生态,连接未来 官网教程:微信小程序JavaScript SDK | 腾讯位置服务  点击创建应用,

  • app场景下uniapp的扫码记录

    app场景下uniapp的扫码记录

    目录 背景 全屏扫码 uniapp自身带的api方法-uni.scanCode 支付宝插件扫码 自定义扫码 uniapp nvue自带的Barcode 操作原生的可视化控件Barcode 背景 扫码需求日益增多,为了满足客户的需求,扫码演变的多种多样,其中有二维码,条形码居中,条形码又可以细分成几种,以下记录全屏和自定义页面扫码的在uniapp的技术实现 全屏扫码 uniapp自身带的api方法-uni.scanCode uni.scanCode(OBJECT) h5平台暂不支持这种形式调起全屏

  • uniapp微信小程序强制更新解决示例详解

    目录 前言 解决办法 前言 微信小程序发完正式版后,别人不是马上就能同步收到的,搞得很复杂,还是上个版本 那咋办捏 解决办法 从uni官网找到了一个api ,可以弹窗强制更新,原理应该是本地对比网上的版本 我直接上代码,欢迎放心粘贴使用 const updateManager = uni.getUpdateManager(); updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpd

  • uniapp微信小程序获取当前定位城市信息的实例代码

    uniapp微信小程序获取当前定位城市信息的实例代码

    目录 一.事先准备 二.正式代码使用 补充:UNIAPP获取当前城市和坐标 总结 一.事先准备 此处用的是腾讯地图的jdk 1.在腾讯地图开发上申请key 2. WebServiceAPI选择签名校验获取SK 3. uniapp上勾选位置接口 4.在腾讯地图上下载微信小程序javaScript SDK放入项目里 二.正式代码使用 提示:可能会出现引入jdk时报错 解决方法: *把jdk最后一行暴漏方式改为export default 引入时用import就行了* // 1.首先在需要用到的地方引

  • uniapp中常用的几种提示弹框

    目录 一.成功提示弹框 二.加载提示弹框 三.确认取消提示框 四.列表选择提示弹框 五.自定义图标 总结 一.成功提示弹框 在执行增.删.改.查等提交成功后弹出提示. uni.showToast({ title: '成功提示', //将值设置为 success 或者直接不用写icon这个参数 icon: 'success', //显示持续时间为 2秒 duration: 2000 }) 效果如下: 若icon参数值设置为none,将不显示“√”图标,只显示文字提示. uni.showToast(

  • JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

    三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来. 使用方式: alert("想要提示的文本内容") 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

  • PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】

    本文实例讲述了PHP中常用的三种设计模式.分享给大家供大家参考,具体如下: PHP中常用的三种设计模式:单例模式.工厂模式.观察者模式 1.单例模式 为何要使用PHP单例模式? 多数人都是从单例模式的字面上的意思来理解它的用途, 认为这是对系统资源的节省, 可以避免重复实例化, 是一种"计划生育". 而PHP每次执行完页面都是会从内存中清理掉所有的资源. 因而PHP中的单例实际每次运行都是需要重新实例化的, 这样就失去了单例重复实例化的意义了. 单单从这个方面来说, PHP的单例的确有

  • python中常用的九种预处理方法分享

    python中常用的九种预处理方法分享

    本文总结的是我们大家在python中常见的数据预处理方法,以下通过sklearn的preprocessing模块来介绍; 1. 标准化(Standardization or Mean Removal and Variance Scaling) 变换后各维特征有0均值,单位方差.也叫z-score规范化(零均值规范化).计算方式是将特征值减去均值,除以标准差. sklearn.preprocessing.scale(X) 一般会把train和test集放在一起做标准化,或者在train集上做标准化

  • Python中常用的8种字符串操作方法

    拼接字符串 使用"+"可以对多个字符串进行拼接 语法格式: str1 + str2 >>> str1 = "aaa" >>> str2 = "bbb" >>> print(str1 + str2) aaabbb 需要注意的是字符串不允许直接与其他类型进行拼接,例如 >>> num = 100 >>> str1 = "hello" >

  • JavaScript中常用的几种字符串方法汇总（新手必看）

    JavaScript中常用的几种字符串方法汇总（新手必看）

    JavaScript常用的几种字符串方法 字符串是一种只读数据,只能查 常用的几种字符串方法: 1.charAt:根据指定的下标获取到对应的字符; 2.charCodeAt:根据指定的下标获取到字符对应的阿斯克码:(底部有ASCII对照表) ps:通过阿斯克码获取到字符: 3.substring:截取字符串: 4.substr:截取字符串: 5.slice:截取字符串: 6.indexOf:查找字符/子字符串在大字符串中第一次出现的位置,找到了返回下标,找不到返回-1: 7.lastIndexO

  • Python数据挖掘中常用的五种AutoEDA 工具总结

    Python数据挖掘中常用的五种AutoEDA 工具总结

    我们能否使用一些自动化工具代替人来完成数据分析的过程呢,现有一些成熟的 AutoEDA 工具可以一定程度上完成上述过程.本文中,我将盘点常见的 AutoEDA 工具,欢迎收藏学习,喜欢点赞支持,文末提供技术交流群,欢迎畅聊. 1.Pandas Profiling https://pandas-profiling.github.io/pandas-profiling/docs/master/index.html Pandas Profiling是款比较成熟的工具,可以直接传入DataFrame即可

  • Mysql中常用的几种join连接方式总结

    Mysql中常用的几种join连接方式总结

    目录 1.内连接 2.左连接 3.右连接 4.查询左表独有数据 5.查询右表独有数据 6.全连接 7.查询左右表各自的独有的数据 总结 1.首先准备两张表 部门表: 员工表: 以下我们就对这两张表进行不同的连接操作 1.内连接 作用: 查询两张表的共有部分 语句:Select from tableA A Inner join tableB B on A.Key = B.Key 示例:SELECT * from employee e INNER JOIN department d on e.dep

  • 详解C++中常用的四种类型转换方式

    详解C++中常用的四种类型转换方式

    目录 1.静态类型转换:static_cast(exp) 2.动态类型转换:dynamic_cast(exp) 3.常类型转换:const_case(exp) 4. 解释类型转换: reinterpret_cast(exp) 1.静态类型转换:static_cast(exp) 1.1静态类型转换主要用于两种转换环境 1.1.1 C++内置类型的转换:与C风格强转类似. 与c相同的地方: #include <iostream> using namespace std; int main() {

  • ORACLE中常用的几种正则表达式小结

    ORACLE中常用的几种正则表达式小结

    ORACLE正则表达式我基本用到的就一下几种,前四种最长用到 REGEXP_LIKE(source_char, pattern, match_parameter) REGEXP_SUBSTR(source_char, pattern, position, occurrence,match_parameter) REGEXP_INSTR(source_char, pattern, position, occurrence,match_parameter) REGEXP_REPLACE REGEXP

随机推荐