swan.showActionSheet

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

方法参数

Object object

object 参数说明

success 返回参数说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：基础用法

• SWAN
• JS

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

设计指南

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

错误

按钮文字冗余，会加大理解成本

错误

与操作菜单自带“取消”选项重复

代码示例 2：自定义按钮字体颜色

• SWAN
• JS

<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>

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

• SWAN
• JS

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

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

• SWAN
• JS

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

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

• SWAN
• JS

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

错误码

Android