All Products
Search

This Product

    Mobile Platform as a Service:Bottom sheet

    Document Center

    Mobile Platform as a Service:Bottom sheet

    Last Updated:Feb 07, 2021

    The interface provides a list of options, which docks at the bottom of the screen.

    Use actionSheet interface

    1. AlipayJSBridge.call('actionSheet', {
    2.   'title': 'Title',
    3.   'btns': ['First button ', 'Second button ', 'Third button'],
    4.   'cancelBtn': 'Cancel',
    5.   'destructiveBtnIndex': 2
    6. }, function(data) {
    7.   switch (data.index) { // index indicates the position of the button clicked by users in actionSheet, starting from 0
    8.     case 0:
    9.       alert ('First button');
    10.       break;
    11.     case 1:
    12.       alert ('Second button');
    13.       break;
    14.     case 2:
    15.       alert ('Third button');
    16.       break;
    17.     case 3:
    18.       alert ('Cancel button');
    19.       break;
    20.   }
    21. });

    Code sample

    1. <h1>Click the button to call actionSheet</h1>
    2. <a href="javascript:void(0)" class="btn actionSheet">Open actionSheet</a>
    4. <script>
    5. function ready(callback) {
    6.   // Call directly if JSBridge has been injected
    7.   if (window.AlipayJSBridge) {
    8.     callback && callback();
    9.   } else {
    10.     // Monitor the injected events if JSBridge hasn't been injected
    11.     document.addEventListener('AlipayJSBridgeReady', callback, false);
    12.   }
    13. }
    14. ready(function() {
    15.   document.querySelector('.actionSheet').addEventListener('click', function() {
    16.     AlipayJSBridge.call('actionSheet',{
    17.       'title': 'Title',
    18.       'btns': ['First button ', 'Second button ', 'Third button'],
    19.       'cancelBtn': 'Cancel',
    20.       'destructiveBtnIndex': 2
    21.     }, function(data) {
    22.       switch (data.index) { // index indicates the position of the button clicked by users in actionSheet, starting from 0
    23.         case 0:
    24.           alert ('First button');
    25.           break;
    26.         case 1:
    27.           alert ('Second button');
    28.           break;
    29.         case 2:
    30.           alert ('Third button');
    31.           break;
    32.         case 3:
    33.           alert ('Cancel button');
    34.           break;
    35.       }
    36.     });
    37.   });
    38. });
    39. </script>

    API

    1. AlipayJSBridge.call('actionSheet',{
    2.   title, btns, cancelBtn, destructiveBtnIndex
    3. }, fn)

    Input parameters

    Name Type Description Required Default value Version
    title string Title N
    btns array A set of buttons; the item type is string Y
    cancelBtn string Configure the cancel button and text N
    destructiveBtnIndex int (Special processing in iOS) Specifies the index number of the button, starting from 0
    Scenario: Data needs to be deleted or cleared. It is in red color by default    		 N
    fn function It’s the callback function after you select an option rather than being called back after API called N

    Output parameter

    The format is {data: {index: 0}}. The index refers to the position of button clicked by users in actionSheet, starting from 0.