用法介紹uniapp確認(rèn)框

來源：千鋒教育

發(fā)布人：xqq

時間： 2023-11-22 11:48:45 1700624925

一、介紹

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

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

二、uni.showModal詳解

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


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

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

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

title：確認(rèn)框的標(biāo)題 content：確認(rèn)框的內(nèi)容 showCancel：是否顯示取消按鈕 cancelText：取消按鈕的文本 confirmText：確定按鈕的文本 success：接收一個回調(diào)函數(shù)，用于處理用戶的操作結(jié)果

三、uni.showActionSheet詳解

uni.showActionSheet用于展示一個包含多個操作按鈕的對話框。


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

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

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

itemList：操作選項的文本列表，以數(shù)組形式進行傳遞 itemColor：操作選項文本的顏色 success：接收一個回調(diào)函數(shù)，用于處理用戶選擇的操作結(jié)果

四、總結(jié)

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

tags: vueis