几种常见的模态框

我们在使用uniapp的过程中，是发现有很多各式各样的弹出框供我们选择，我们需要将其变换成不同的形态使用；我们必须清楚主要的组成部分内容；这样才能方便我们使用。

alert：只有一个OK按钮，点击按钮关闭弹框。

confirm：包含确定、取消两个按钮，点击确定按钮执行对应的回调函数并关闭弹框，点击取消按钮关闭弹框。

????????prompt：包含输入框、确定、取消三个按钮，点击确定按钮执行对应的回调函数并关闭弹框，点击取消按钮关闭弹框。

目录

一、实现思路

二、实现步骤

????????①提示后跳转页面

????????② 提示成功后跳转页面

????????③加载框

? ? ? ? ④自定义模态框的颜色

? ? ? ? ⑤底部弹出选择模态框

⑥模态框展示图片

三、小结 + 注意事项

一、实现思路

? ? ? 1.? div中添加一个绑定事件

? ? ? ?2.? ?再js中写入需要实现的方法即可

二、实现步骤

????????①提示后跳转页面

???????弹出提示框---点击取消停在本页面，点击确认后跳转到成功的页面?点击按钮后

/*complete:绑定事件的方法 */
complete(){
?? ??? ?uni.showModal({
?? ??? ? title: '提示', ? //提示信息
?? ??? ? content: '你确定订单已经完成了吗？',
?? ??? ? /*点击取消侧在返回原来的页面，点击确定跳转到成功的页面*/
?? ??? ? success: function (res) {
?? ??? ? if (res.confirm) {
?? ??? ??? ? uni.navigateTo({
?? ??? ??? ? ?? ?url: 'XXX/XXX/X' ?//需要跳转的页面
?? ??? ??? ? })
?? ??? ? console.log('用户点击确定');
?? ??? ? } else if (res.cancel) {
?? ??? ? console.log('用户点击取消');
?? ??? ? }
?? ??? ? }
?? ??? ?});
?? ?}

????????② 提示成功后跳转页面

/*弹出成功的提示后2秒，跳转页面 ?? ??? ?setTimeout：定时器*/ ?? ??? ?XXXXX() { ?? ??? ??? ??? ?uni.showToast({ ?? ??? ??? ??? ??? ?title: '成功提示', ?? ??? ??? ??? ??? ?icon: 'success',? ?? ??? ??? ??? ??? ?<!-- duration: 2000 --> ?? ??? ??? ??? ?}) ?? ??? ??? ??? ? ?? ??? ??? ??? ?setTimeout(() => { ?? ??? ??? ??? ??? ?uni.navigateTo({ ?? ??? ??? ??? ??? ??? ?url: 'XXX/XXX/X' ?//需要跳转的页面 ?? ??? ??? ??? ??? ?}) ?? ??? ??? ??? ?}, 2000) ?? ??? ??? ?},?? ??? ??? ?

????????③加载框

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

? ? ? ? ④自定义模态框的颜色

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

? ? ? ? ⑤底部弹出选择模态框

可自定义字体颜色，默认的底部弹出框，无法修改布局；

????????uni.showActionSheet({ itemList: ['选项一', '选项二', '选项三'],

// 字体颜色

????????itemColor: "#55aaff",

????????success (res) {

// 选择其中任意一项后，获取其索引（res.tapIndex），从0开始 console.log(res.tapIndex) },
fail (res) {?
// 取消后的操作
} })

⑥模态框展示图片

?? ?可自定义需要使用的模态框图片
uni.showToast({
?? ?title: '查询中',
?? ?//图片位置
?? ?image: '../../static/loading.gif',
?? ?duration: 2000 ? ?
})

三、小结 + 注意事项

????????

????????1、uni.showToast(XXX)（消息提示框）

????????2、uni.showModal(XXX)(显示两个按钮的提示框)

????????3、uni.showActionSheet(XXX)(从底部向上弹出操作菜单)