ionic 上拉菜单(ActionSheet)
作者:BrightSoul
时间:2026-08-11
浏览:0
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项。 那些风险很高的选项,会用醒目的红色高亮出来,目的就是让人一眼注意到。想把它关闭也很简单,点一下取消按钮,或者直接点空白区域,它就会消失。 实例 HTML 代码 Action Sheet Ja vaScript 代码 如果想在代码
本文目录
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项。
那些风险很高的选项,会用醒目的红色高亮出来,目的就是让人一眼注意到。想把它关闭也很简单,点一下取消按钮,或者直接点空白区域,它就会消失。
实例
HTML 代码
Action Sheet
Ja vaScript 代码
如果想在代码里主动调起上拉菜单,做法并不复杂,直接在你的 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: 'Share 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);
};
}])
运行效果如下图:
作者最新文章
漫蛙manwa2在线阅读入口
2026-10-13 13:49
漫蛙漫画app下载安装包
2026-10-13 13:19
漫蛙MANWA2官方入口
2026-10-13 13:18
manwa漫蛙APP下载最新版本
2026-10-13 13:17
漫蛙漫画官方网页版app下载
2026-10-13 13:16
上一篇:
ionic 背景层
下一篇:
ionic icon(图标)
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多










































