ionic 上拉菜单(ActionSheet) · W3School Ionic 教程

# ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 ## 实例 ### HTML 代码 ``` <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Action Sheet</h2> </ion-content> </ion-pane> </body> ``` ### JavaScript 代码在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务： ``` angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){ $scope.show = function() { var hideSheet = $ionicActionSheet.show({ buttons: [ { text: '<b>Share</b> This' }, { text: 'Move' } ], destructiveText: 'Delete', titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() { // add cancel code.. }, buttonClicked: function(index) { return true; } }); $timeout(function() { hideSheet(); }, 2000); }; }]) ``` 运行效果如下图： ![](http://www.runoob.com/wp-content/uploads/2015/08/687474703a2f2f3776696a717a…6c622e636c6f7564646e2e636f6d2f616374696f6e2d73686565742e6769662e676966.gif)