my.showActionSheet
Use this API to display the operation menu.
Sample Code
index.json
copy
// API-DEMO page/API/action-sheet/action-sheet.json
{
"defaultTitle": "Operation Menu"
}index.axml
copy
<!-- API-DEMO page/API/action-sheet/action-sheet.axml-->
<view class="page">
<view class="page-description">Action sheet API</view>
<view class="page-section">
<view class="page-section-title">my.showActionSheet</view>
<view class="page-section-demo">
<button type="primary" onTap="showActionSheet">Show Action Sheet</button>
</view>
</view>
</view>index.js
copy
// API-DEMO page/API/action-sheet/action-sheet.js
Page({
showActionSheet() {
my.showActionSheet({
title: 'ActionSheet',
items: ['Menu 1', 'Menu 2', 'Menu3'],
cancelButtonText: 'Cancel',
success: (res) => {
const btn = res.index === -1 ? 'Cancel' : 'No' + res.index + '';
my.alert({
title: `You clicked ${btn} button`
});
},
});
},
});Parameters
| Property | Type | Required | Description |
| title | String | No | The title of the menu. |
| items | String Array | Yes | The text array of the menu button. |
| cancelButtonText | String | No | Text on the cancel button, which is "Cancel" by default. Note: This field is invalid for Android and the cancel button will not be displayed. |
| destructiveBtnIndex | Number | No | This field specifies the index number of a specific button. The value starts from 0. Used for buttons to delete or clear data or the ones in similar scenarios. The default color is red. |
| badges | Object Array | No | For the array with red option. See badges parameters below for the fields in the array. |
| success | Function | No | The callback function for a successful API call. |
| fail | Function | No | The callback function for a failed API call. |
| complete | Function | No | The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails. |
Badges parameters
| Property | Type | Description |
| index | Number | The index of the option that needs use red marks, starting from 0. |
| type | String | Red mark types. Valid values are: - none: no red mark- point: red mark- num: numerical red mark- text: texts in red |
| text | String | Customized red mark: - This field is optional when the value of type is none/point/more;- When the value of type is num, but the value of this field has decimals, not greater than 0, or not less than 100, this field is not displayed. |