swan.showActionSheet

解释：​显示操作菜单

方法参数

Object object

object参数说明

success返回参数说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1 - 基础用法

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

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

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

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

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

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

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

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

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