用法介绍uniapp确认框

一、介绍

在我们的应用中，经常存在一些操作需要用户进行确认，例如删除数据或者支付等。Uniapp提供了多种不同样式和功能的确认框，方便我们快速实现操作确认功能。

Uniapp主要提供了两种不同风格的确认框，分别是uni.showModal和uni.showActionSheet。

二、uni.showModal详解

uni.showModal主要用于展示一个包含title、content和两个操作按钮的对话框。


    uni.showModal({
        title: '确认删除',
        content: '你确定要删除这个数据吗？',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击了确定按钮');
            } else if (res.cancel) {
                console.log('用户点击了取消按钮');
            }
        }
    });

在上面的代码中，我们展示了一个带有标题“确认删除”和内容“你确定要删除这个数据吗？”的确认框，并提供了“确定”和“取消”两个操作按钮。用户点击确定按钮时，控制台上会输出“用户点击了确定按钮”；当用户点击取消按钮时，控制台上会输出“用户点击了取消按钮”。

uni.showModal方法可以接收多个参数，其中一些比较重要的属性如下：

title：确认框的标题 content：确认框的内容 showCancel：是否显示取消按钮 cancelText：取消按钮的文本 confirmText：确定按钮的文本 success：接收一个回调函数，用于处理用户的操作结果

三、uni.showActionSheet详解

uni.showActionSheet用于展示一个包含多个操作按钮的对话框。


    uni.showActionSheet({
        itemList: ['选项1', '选项2', '选项3'],
        success: function (res) {
            console.log('用户选择了第' + (res.tapIndex + 1) + '个选项');
        }
    });

在上面的代码中，我们展示了一个带有三个操作选项的确认框，用户可以通过点击选项来执行不同的操作。当用户选择一个选项时，控制台上会输出对应选项的序号。

uni.showActionSheet方法可以接收多个参数，其中一些比较重要的属性如下：

itemList：操作选项的文本列表，以数组形式进行传递 itemColor：操作选项文本的颜色 success：接收一个回调函数，用于处理用户选择的操作结果

四、总结

通过本文我们学习了uniapp中的确认框方法uni.showModal和uni.showActionSheet，并深入了解了如何使用它们进行操作确认和选择操作。使用uni.showModal或uni.showActionSheet可以方便地为我们的应用提供操作确认和选择等功能。