title: swan.showActionSheet header: develop nav: api sidebar: toast_swan-showActionSheet

webUrl: https://qft12m.smartapps.cn/swan-api/show-action-sheet/show-action-sheet

解释：​显示操作菜单

方法参数

Object object

object参数说明

属性名 类型 必填 默认值 说明
itemList Array.<string> 是 按钮的文字数组，数组长度最大为6个。
itemColor HexColor 否 #3c76ff 按钮的文字颜色。
success Function 否 接口调用成功的回调函数，详见返回参数说明。
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

参数名 类型 说明
tapIndex Number 用户点击的按钮，从上到下的顺序，从0开始。

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/swan-api/show-action-sheet/show-action-sheet - 图1 请使用百度APP扫码

代码示例 1 - 基础用法

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">基础用法</view>
  3.     <button bind:tap="showActionSheet" type="primary" hover-stop-propagation="true">普通操作菜单</button> 
  4. </view>
  1. Page({
  2.     showActionSheet() {
  3.         swan.showActionSheet({
  4.             itemList: ['选项一', '选项二', '选项三', '选项四'],
  5.             success: res => {
  6.                 console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
  7.             }
  8.         });
  9.     }
  10. });

:::

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

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>自定义按钮字体颜色</view>
  4.         <view>itemColor: '#00BC89'</view>
  5.     </view>
  6.     <button bind:tap="showActionSheetCustom" type="primary" hover-stop-propagation="true">自定义按钮颜色的操作菜单</button> 
  7. </view>
  1. Page({
  2.     showActionSheetCustom() {
  3.         swan.showActionSheet({
  4.             itemList: ['选项一', '选项二', '选项三', '选项四'],
  5.             itemColor: '#00BC89',
  6.             success: res => {
  7.                 console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
  8.             }
  9.         });
  10.     }
  11. });

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

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">按钮数量最多</view>
  3.     <button bind:tap="showActionSheetMore" type="primary" hover-stop-propagation="true">6个按钮的操作菜单</button> 
  4. </view>
  1. Page({
  2.     showActionSheetMore() {
  3.         swan.showActionSheet({
  4.             itemList: ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六'],
  5.             success: res => {
  6.                 console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
  7.             }
  8.         });
  9.     }
  10. });

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

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">按钮数量最少</view>
  3.     <button bind:tap="showActionSheetLess" type="primary" hover-stop-propagation="true">1个按钮的操作菜单</button> 
  4. </view>
  1. Page({
  2.     showActionSheetLess() {
  3.         swan.showActionSheet({
  4.             itemList: ['选项一'],
  5.             success: res => {
  6.                 console.log('用户点击了第' + (res.tapIndex + 1) + '个按钮');
  7.             }
  8.         });
  9.     }
  10. });

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

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">带有操作结果提示</view>
  3.     <button bind:tap="showActionSheetResult" type="primary" hover-stop-propagation="true">带有操作结果提示的操作菜单</button> 
  4. </view>
  1. Page({
  2.     showActionSheetResult() {
  3.         swan.showActionSheet({
  4.             itemList: ['选项一', '选项二', '选项三', '选项四'],
  5.             success: res => {
  6.                 swan.showModal({
  7.                     title: '操作成功',
  8.                     content: '用户点击了第' + (res.tapIndex + 1) + '个按钮',
  9.                     showCancel: false
  10.                 });
  11.             },
  12.             fail: err => {
  13.                 swan.showModal({
  14.                     title: '操作取消',
  15.                     content: '用户关闭了操作菜单',
  16.                     showCancel: false
  17.                 });
  18.             }
  19.         });
  20.     }
  21. });

错误码

Android

错误码 说明
201 解析失败，请检查调起协议是否合法
202 解析失败，请检查参数是否正确