一、介紹

在我們的應(yīng)用中，經(jīng)常存在一些操作需要用戶進(jìn)行確認(rèn)，例如刪除數(shù)據(jù)或者支付等。Uniapp提供了多種不同樣式和功能的確認(rèn)框，方便我們快速實(shí)現(xiàn)操作確認(rèn)功能。

Uniapp主要提供了兩種不同風(fēng)格的確認(rèn)框，分別是uni.showModal和uni.showActionSheet。

二、uni.showModal詳解

uni.showModal主要用于展示一個(gè)包含title、content和兩個(gè)操作按鈕的對(duì)話框。

    uni.showModal({
        title: '確認(rèn)刪除',
        content: '你確定要?jiǎng)h除這個(gè)數(shù)據(jù)嗎？',
        success: function (res) {
            if (res.confirm) {
                console.log('用戶點(diǎn)擊了確定按鈕');
            } else if (res.cancel) {
                console.log('用戶點(diǎn)擊了取消按鈕');
            }
        }
    });

在上面的代碼中，我們展示了一個(gè)帶有標(biāo)題“確認(rèn)刪除”和內(nèi)容“你確定要?jiǎng)h除這個(gè)數(shù)據(jù)嗎？”的確認(rèn)框，并提供了“確定”和“取消”兩個(gè)操作按鈕。用戶點(diǎn)擊確定按鈕時(shí)，控制臺(tái)上會(huì)輸出“用戶點(diǎn)擊了確定按鈕”；當(dāng)用戶點(diǎn)擊取消按鈕時(shí)，控制臺(tái)上會(huì)輸出“用戶點(diǎn)擊了取消按鈕”。

uni.showModal方法可以接收多個(gè)參數(shù)，其中一些比較重要的屬性如下：

三、uni.showActionSheet詳解

uni.showActionSheet用于展示一個(gè)包含多個(gè)操作按鈕的對(duì)話框。

    uni.showActionSheet({
        itemList: ['選項(xiàng)1', '選項(xiàng)2', '選項(xiàng)3'],
        success: function (res) {
            console.log('用戶選擇了第' + (res.tapIndex + 1) + '個(gè)選項(xiàng)');
        }
    });

在上面的代碼中，我們展示了一個(gè)帶有三個(gè)操作選項(xiàng)的確認(rèn)框，用戶可以通過點(diǎn)擊選項(xiàng)來執(zhí)行不同的操作。當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)，控制臺(tái)上會(huì)輸出對(duì)應(yīng)選項(xiàng)的序號(hào)。

uni.showActionSheet方法可以接收多個(gè)參數(shù)，其中一些比較重要的屬性如下：

四、總結(jié)

通過本文我們學(xué)習(xí)了uniapp中的確認(rèn)框方法uni.showModal和uni.showActionSheet，并深入了解了如何使用它們進(jìn)行操作確認(rèn)和選擇操作。使用uni.showModal或uni.showActionSheet可以方便地為我們的應(yīng)用提供操作確認(rèn)和選擇等功能。