Ionic - Javascript 动作面板

动作面板 (Action Sheet) 是一个 Ionic 服务，它会在屏幕底部触发一个向上滑动的面板，您可以将其用于各种目的。

使用动作面板

在下面的示例中，我们将向您展示如何使用 Ionic 动作面板。首先，我们将注入$ionicActionSheet服务作为我们控制器的依赖项，然后我们将创建$scope.showActionSheet()函数，最后，我们将在 HTML 模板中创建一个按钮来调用我们创建的函数。

控制器代码

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() {
      // Show the action sheet
      var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         ],
			
         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',
			
         cancel: function() {
            // add cancel code...
         },
			
         buttonClicked: function(index) {
            if(index === 0) {
               // add edit 1 code
            }
				
            if(index === 1) {
               // add edit 2 code
            }
         },
			
         destructiveButtonClicked: function() {
            // add delete code..
         }
      });
   };
})

HTML 代码

<button class = "button">Action Sheet Button</button>

代码解释

当我们点击按钮时，它将触发$ionicActionSheet.show函数，并且动作面板将出现。您可以创建自己的函数，这些函数将在点击其中一个选项时被调用。cancel函数将关闭面板，但您可以添加其他一些行为，这些行为将在点击取消选项之前被调用。

buttonClicked函数是您可以编写代码的地方，这些代码将在点击其中一个编辑选项时被调用。我们可以使用index参数跟踪多个按钮。destructiveButtonCLicked是一个函数，当点击删除选项时将被触发。此选项默认为红色。

$ionicActionSheet.show()方法还有一些其他有用的参数。您可以在下表中查看所有参数。

显示方法选项