swan.showActionSheet

解释:​显示操作菜单

方法参数

Object object

object参数说明

属性名类型必填默认值说明
itemListArray.<string>按钮的文字数组,数组长度最大为6个。
itemColorHexColor#3c76ff按钮的文字颜色。
successFunction接口调用成功的回调函数,详见返回参数说明。
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明

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

示例

在开发者工具中预览效果

扫码体验

swan.showActionSheet - 图1请使用百度APP扫码

代码示例 1 - 基础用法

  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 - 自定义按钮字体颜色

  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 - 按钮数量最多

  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 - 按钮数量最少

  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 - 带有操作结果提示

  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解析失败,请检查参数是否正确