阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 上拉菜单 (ActionSheet)

      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);
      
          };
      }])
      

      运行效果如下图:

      目录
      目录