几种常见的模态框

我们在使用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)(从底部向上弹出操作菜单)