确认提示弹框
uni.showModal({
title: '提示',
// 提示文字
content: '确认删除该条信息吗?',
// 取消按钮的文字自定义
cancelText: "取消",
// 确认按钮的文字自定义
confirmText: "删除",
//删除字体的颜色,颜色最好是十六进制,不然程序发布上线会出问题
confirmColor:'#ef111b',
//取消字体的颜色
cancelColor:'#000000',
success: function(res) {
if (res.confirm) {
// 执行确认后的操作
}
else {
// 执行取消后的操作
}
}
})
因为弹框是异步的,没有this指向,在成功回调或失败回调没办法直接去调用函数或传递参数,
所以要在成功回调后面加bind去绑定外面this,里面进行复制 ,具体的看一下操作。
uni.showModal({
title: '提示',
content: '确认删除该条吗?',
cancelText: "取消",
confirmText: "删除",
confirmColor:'#ef111b',
cancelColor:'#000000',
success: function(res) {
//变量接this
var that = this
if (res.confirm) {
// 执行确认后的操作
that.delFun()
}
else {
// 执行取消后的操作
}
// 给弹框绑定this
}.bind(this)
})
常用的弹框我已近在下面罗列出来了
(1)成功的提示:
uni.showToast({
title: '成功提示',
//将值设置为 success 或者直接不用写icon这个参数
icon: 'success',
//显示持续时间为 2秒
duration: 2000
})
//前端数据请求时,显示加载提示弹框
uni.showLoading({
title: '加载中...'
});
// 数据从后端接口返回后,提示弹框关闭
uni.hideLoading()
同上,设置icon参数值为none,将不显示加载图标,只显示文字提示。
列表选择提示弹框
执行某些列表选择时弹出提示。
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
})