All Products
Search
Document Center

Bottom sheet

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