uniapp 提示框(showToast、showModal、showLoading)
uniapp (showToast、showModal、showLoading)
·
一、showToast
uni.showToast({
title: '没有更多了',//标题 必填
icon: 'none',//图标
image: '',//自定义图标的本地路径(app端暂不支持gif)
mask: true,//是否显示透明蒙层,防止触摸穿透,默认:false
duration: '',//提示的延迟时间,单位毫秒,默认:1500
position: '',//纯文本轻提示显示位置,填写有效值后只有 title 属性生效,且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。 App
success: '',//接口调用成功的回调函数
fail: '',//接口调用失败的回调函数
complete: '',//接口调用结束的回调函数(调用成功、失败都会执行)
});
1)icon的区别
openToast(){
uni.showToast({
title: 'success',
icon: 'success',
});
},
二、showModal
1)通常使用
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
openModel() {
uni.showModal({
title: '提示',
content: '这是一个模态框!',
editable: true,
placeholderText: '显示输入框',
});
},
注:显示输入框时,content作为输入框value出现。
2)详细说明
uni.showModel({
title: '',//提示的标题
content: '',//提示的内容
showCancel: '',//是否显示取消按钮,默认为 true
cancelText: '',//取消按钮的文字,默认为"取消"
cancelColor: '',//取消按钮的文字颜色,默认为"#000000"
confirmText: '',//确定按钮的文字,默认为"确定"
confirmColor: '',//确定按钮的文字颜色
editable: '',//是否显示输入框
placeholderText String 否 显示输入框时的提示文本
success: '',//接口调用成功的回调函数
fail: '',//接口调用失败的回调函数
complete: '',//接口调用结束的回调函数(调用成功、失败都会执行)
});
三、showLoading 和 hideLoading
uni.showLoading({
title: '加载中',
mask: true,
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
详细说明
uni.showLoading({
title: '',//提示的文字内容,显示在loading的下方
mask: '',//Boolean 是否显示透明蒙层,防止触摸穿透,默认:false
success: function (res) {},//接口调用成功的回调函数
fail: '',//接口调用失败的回调函数
complete: '',//接口调用结束的回调函数(调用成功、失败都会执行)
});
更多推荐
已为社区贡献1条内容
所有评论(0)