1、$ionicActionSheet
ionic的上拉菜单由三种按钮组成,点击任何按钮都自动关闭上拉菜单;
取消按钮 - 取消按钮总是位于菜单的底部,用户点击该按钮将关闭。一个上拉菜单 最多有一个取消按钮。
危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个 危险选项按钮。
自定义按钮 - 用户定义的任意数量的按钮。
2、参数
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象,其text字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段,则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段,则上拉菜单中不出现危险选项按钮
buttonClicked - 自定义按钮的回调函数,当用户点击时触发
cancel - 取消按钮回调函数,当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数,当用户点击时触发
cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
cssClass - 附加的CSS样式类名称
1、Html
- <ion-header-bar class="bar bar-header bar-light bar-calm">
- <button class="button button-icon icon ion-navicon"></button>
- <ion-title class="bar-calm">腾讯新闻</ion-title>
- </ion-header-bar>
-
- <ion-content>
- <button class="button button-dark" ng-click="show()">show</button>
- </ion-content>
2、Controllerl
- appCntrollers.controller('ManageActionSheetCtrl', function ($scope, $timeout, $ionicActionSheet) {
-
- $scope.show = function () {
-
- $ionicActionSheet.show({
- titleText: '修改你的专辑',
- destructiveText: '删除',
- cancelText: '取消',
- buttons: [
- { text: '<b>分享</b> 快乐' },
- { text: '拍摄照片' },
- { text: '相册选择' },
- ],
- cancel: function () {
- alert('取消事件!');
- },
- destructiveButtonClicked: function () {
- alert('删除事件!');
- return true;
- },
- buttonClicked: function (index) {
- switch (index) {
- case 0:
-
- alert('分享快乐');
- break;
- case 1:
- alert('拍摄照片');
- break;
- case 2:
- alert('相册选择');
- break;
- default:
- break;
- }
- return true;
- }
- });
- };
- })
3、效果图