当前位置:K88软件开发文章中心编程语言APP编程ionic01 → 文章内容

ionic 上拉菜单(ActionSheet)

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-12 6:35:02

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); }; }])尝试一下 ?运行效果如下图:

ionic 上拉菜单(ActionSheet)