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(&qpos;starter&qpos;, [&qpos;ionic&qpos;])

.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( &qpos;actionsheetCtl&qpos;,[&qpos;$scope&qpos;,&qpos;$ionicActionSheet&qpos;,&qpos;$timeout&qpos; ,function($scope,$ionicActionSheet,$timeout){
    $scope.show = function() {

        var hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: &qpos;<b>Share</b> This&qpos; },
              { text: &qpos;Move&qpos; }
            ],
            destructiveText: &qpos;Delete&qpos;,
            titleText: &qpos;Modify your album&qpos;,
            cancelText: &qpos;Cancel&qpos;,
            cancel: function() {
                 // add cancel code..
               },
            buttonClicked: function(index) {
              return true;
            }
        });

        $timeout(function() {
            hideSheet();
        }, 2000);

    };  
}])

运行效果如下图：