?百度智能小程序 顯示操作菜單

swan.showActionSheet

解釋：?顯示操作菜單，設(shè)計(jì)文檔詳見(jiàn) 底部操作菜單。

方法參數(shù)

Object object

object參數(shù)說(shuō)明

success 返回參數(shù)說(shuō)明

示例 

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

代碼示例 1 - 基礎(chǔ)用法

<view class="card-area">
    <view class="top-description border-bottom">基礎(chǔ)用法</view>
    <button bind:tap="showActionSheet" type="primary" hover-stop-propagation="true">普通操作菜單</button> 
</view>

Page({
    showActionSheet() {
        swan.showActionSheet({
            itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三', '選項(xiàng)四'],
            success: res => {
                console.log('用戶點(diǎn)擊了第' + (res.tapIndex + 1) + '個(gè)按鈕');
            }
        });
    }
});

按鈕文字幫助用戶快速理解選項(xiàng)含義，建議精簡(jiǎn)表達(dá)，控制在 10 個(gè)中文字符內(nèi)

代碼示例 2 - 自定義按鈕字體顏色

<view class="card-area">
    <view class="top-description border-bottom">
        <view>自定義按鈕字體顏色</view>
        <view>itemColor: '#00BC89'</view>
    </view>
    <button bind:tap="showActionSheetCustom" type="primary" hover-stop-propagation="true">自定義按鈕顏色的操作菜單</button> 
</view>

Page({
    showActionSheetCustom() {
        swan.showActionSheet({
            itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三', '選項(xiàng)四'],
            itemColor: '#00BC89',
            success: res => {
                console.log('用戶點(diǎn)擊了第' + (res.tapIndex + 1) + '個(gè)按鈕');
            }
        });
    }
});

代碼示例 3 - 按鈕數(shù)量最多

<view class="card-area">
    <view class="top-description border-bottom">按鈕數(shù)量最多</view>
    <button bind:tap="showActionSheetMore" type="primary" hover-stop-propagation="true">6個(gè)按鈕的操作菜單</button> 
</view>

Page({
    showActionSheetMore() {
        swan.showActionSheet({
            itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三', '選項(xiàng)四', '選項(xiàng)五', '選項(xiàng)六'],
            success: res => {
                console.log('用戶點(diǎn)擊了第' + (res.tapIndex + 1) + '個(gè)按鈕');
            }
        });
    }
});

代碼示例 4 - 按鈕數(shù)量最少

<view class="card-area">
    <view class="top-description border-bottom">按鈕數(shù)量最少</view>
    <button bind:tap="showActionSheetLess" type="primary" hover-stop-propagation="true">1個(gè)按鈕的操作菜單</button> 
</view>

Page({
    showActionSheetLess() {
        swan.showActionSheet({
            itemList: ['選項(xiàng)一'],
            success: res => {
                console.log('用戶點(diǎn)擊了第' + (res.tapIndex + 1) + '個(gè)按鈕');
            }
        });
    }
});

代碼示例 5 - 帶有操作結(jié)果提示

<view class="card-area">
    <view class="top-description border-bottom">帶有操作結(jié)果提示</view>
    <button bind:tap="showActionSheetResult" type="primary" hover-stop-propagation="true">帶有操作結(jié)果提示的操作菜單</button> 
</view>

Page({
    showActionSheetResult() {
        swan.showActionSheet({
            itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三', '選項(xiàng)四'],
            success: res => {
                swan.showModal({
                    title: '操作成功',
                    content: '用戶點(diǎn)擊了第' + (res.tapIndex + 1) + '個(gè)按鈕',
                    showCancel: false
                });
            },
            fail: err => {
                swan.showModal({
                    title: '操作取消',
                    content: '用戶關(guān)閉了操作菜單',
                    showCancel: false
                });
            }
        });
    }
});

錯(cuò)誤碼

Android