全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

用法介绍uniapp确认框

发布时间:2023-11-22 11:48:45
发布人:xqq

一、介绍

在我们的应用中,经常存在一些操作需要用户进行确认,例如删除数据或者支付等。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可以方便地为我们的应用提供操作确认和选择等功能。

vueis

相关文章

MongoDB大于等于查询

MongoDB大于等于查询

2023-11-22
理解clonedeep方法

理解clonedeep方法

2023-11-22
Oracle字符串分割详解

Oracle字符串分割详解

2023-11-22
深入理解feed_dict

深入理解feed_dict

2023-11-22

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取