ionic 上拉菜单

上拉菜单(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);

    };  
}])

运行效果如下图:

ionic 上拉菜单

作者:andy,如若转载,请注明出处:https://www.web176.com/ionic/9936.html

(0)
打赏 支付宝 支付宝 微信 微信
andy的头像andy
上一篇 2023年2月17日
下一篇 2023年2月17日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注