百度智能小程序 顯示模態(tài)彈窗

swan.showModal

解釋：顯示模態(tài)彈窗。用于同步用戶重要信息，并要求用戶進(jìn)行確認(rèn)，或執(zhí)行特定操作以決策下一步驟。設(shè)計(jì)文檔詳見模態(tài)對(duì)話框。彈窗標(biāo)題需措辭精簡(jiǎn)，建議控制在 8 個(gè)中文字符內(nèi)。如果提示的內(nèi)容簡(jiǎn)單，可以去掉彈窗標(biāo)題。

方法參數(shù)

Object object

object 參數(shù)說明

success 返回參數(shù)說明

示例 

在開發(fā)者工具中打開

代碼示例 1：默認(rèn)樣式

<view class="card-area">
    <view class="top-description border-bottom">默認(rèn)樣式</view>
    <button bindtap="primary" type="primary" hover-stop-propagation="true">默認(rèn)模態(tài)彈窗</button>
</view>

Page({
    primary() {
        swan.showModal({
            title: '提示標(biāo)題',
            content: '提示內(nèi)容、告知狀態(tài)、信息和解決方法，描述盡量控制在兩行內(nèi)',
            showCancel: true,
            cancelText: '取消',
            confirmText: '確定'
        });
    }
});

代碼示例 2：無標(biāo)題、單操作

<view class="card-area">
    <view class="top-description border-bottom">設(shè)置無標(biāo)題，單操作按鈕</view>
    <button bindtap="showModalNotitle" type="primary" hover-stop-propagation="true">無標(biāo)題模態(tài)彈窗</button>
</view>

Page({
    showModalNotitle() {
        swan.showModal({
            content: '提示內(nèi)容、告知狀態(tài)、信息和解決方法，可以折行',
            showCancel: false,
            confirmText: '確定'
        });
    }
});

代碼示例 3：自定義選項(xiàng)顏色

<view class="card-area">
    <view class="top-description border-bottom">
        <view>自定義選項(xiàng)顏色</view>
        <view>
            confirmColor="#F7544F"
            cancelColor="#000000"
        </view>
    </view>
    <button bindtap="showModalColor" type="primary" hover-stop-propagation="true">自定義選項(xiàng)顏色的模態(tài)彈窗</button>
</view>

Page({
    showModalColor() {
        swan.showModal({
            title: '提示標(biāo)題',
            content: '提示內(nèi)容、告知狀態(tài)、信息和解決方法，描述盡量控制在兩行內(nèi)',
            showCancel: true,
            confirmText: '警示操作',
            cancelText: '取消',
            cancelColor: '#000000',
            confirmColor: '#F7544F'
        });
    }
});

設(shè)計(jì)指南

可定制樣式的只有選項(xiàng)按鈕的文案顏色。

• 定義顏色時(shí)須有主次之分，可配合使用品牌色或主題色。但請(qǐng)注意，過多顏色并存，可能會(huì)影響用戶判斷。
• 對(duì)于不可逆的操作，建議使用紅色（ #ff1111 ），警告用戶此操作的重要性。

  

  正確

  確定按鈕（confirmColor）使用品牌色，與小程序整體風(fēng)格更一致。

  

  錯(cuò)誤

  多種強(qiáng)調(diào)色共用，導(dǎo)致按鈕沒有主次。

參考示例

參考示例 1：開發(fā)者可在操作 modal 后進(jìn)行業(yè)務(wù)邏輯 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <button bindtap="showModal" type="primary" hover-stop-propagation="true">button</button>
    </view>
</view>

Page({
    showModal() {
        swan.showModal({
            title: 'title',
            content: 'content',
            success:res => {
                if (res.confirm) {
                    console.log('用戶點(diǎn)擊了確定');
                }
                else if(res.cancel) {
                    console.log('用戶點(diǎn)擊了取消');
                }
            }
        });
    }
});

錯(cuò)誤碼

Android

iOS