​百度智能小程序 显示操作菜单

swan.showActionSheet

解释：​显示操作菜单，设计文档详见 底部操作菜单。

方法参数

Object object

object参数说明

success 返回参数说明

示例 

在开发者工具中打开

代码示例 1 - 基础用法

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

Page({
    showActionSheet() {
        swan.showActionSheet({
            itemList: ['选项一', '选项二', '选项三', '选项四'],
            success: res => {
                console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
            }
        });
    }
});

按钮文字帮助用户快速理解选项含义，建议精简表达，控制在 10 个中文字符内

代码示例 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: ['选项一', '选项二', '选项三', '选项四'],
            itemColor: '#00BC89',
            success: res => {
                console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
            }
        });
    }
});

代码示例 3 - 按钮数量最多

<view class="card-area">
    <view class="top-description border-bottom">按钮数量最多</view>
    <button bind:tap="showActionSheetMore" type="primary" hover-stop-propagation="true">6个按钮的操作菜单</button> 
</view>

Page({
    showActionSheetMore() {
        swan.showActionSheet({
            itemList: ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六'],
            success: res => {
                console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
            }
        });
    }
});

代码示例 4 - 按钮数量最少

<view class="card-area">
    <view class="top-description border-bottom">按钮数量最少</view>
    <button bind:tap="showActionSheetLess" type="primary" hover-stop-propagation="true">1个按钮的操作菜单</button> 
</view>

Page({
    showActionSheetLess() {
        swan.showActionSheet({
            itemList: ['选项一'],
            success: res => {
                console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
            }
        });
    }
});

代码示例 5 - 带有操作结果提示

<view class="card-area">
    <view class="top-description border-bottom">带有操作结果提示</view>
    <button bind:tap="showActionSheetResult" type="primary" hover-stop-propagation="true">带有操作结果提示的操作菜单</button> 
</view>

Page({
    showActionSheetResult() {
        swan.showActionSheet({
            itemList: ['选项一', '选项二', '选项三', '选项四'],
            success: res => {
                swan.showModal({
                    title: '操作成功',
                    content: '用户点击了第' + (res.tapIndex + 1) + '个按钮',
                    showCancel: false
                });
            },
            fail: err => {
                swan.showModal({
                    title: '操作取消',
                    content: '用户关闭了操作菜单',
                    showCancel: false
                });
            }
        });
    }
});

错误码

Android