• swan.showActionSheet
  • 方法参数
    • object 参数说明
    • success 返回参数说明
  • 示例
    • 代码示例 1：基础用法
      • 按钮文字帮助用户快速理解选项含义，建议精简表达，控制在 10 个中文字符内
    • 代码示例 2：自定义按钮字体颜色
    • 代码示例 3：按钮数量最多
    • 代码示例 4：按钮数量最少
    • 代码示例 5：带有操作结果提示
  • 错误码
    • Android

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