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);
};
}])
运行效果如下图:
作者最新文章
索尼 Xperia 1 VIII / VII / VI 等手机获 Android 17 更新,新增桌面模式等功能
2026-09-08 16:44
加拿大留学监护声明书(IMM 5646)双页签署与公证核对指南
2026-09-03 15:02
在线PDF转图片教程:一键生成高清图片包
2026-09-03 12:04
Creo零基础入门:新建零件与第一次拉伸建模完整指南
2026-09-03 06:02
扫描件PDF转Word的在线操作步骤与编辑可行性判断
2026-09-02 18:39
上一篇:
ionic 背景层
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































