几种常见的模态框

我们在使用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',
                   
               })

               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) {
// 取消后的操作
} })