ionic 上拉菜單

2018-10-13 19:01 更新

ionic 上拉菜單(ActionSheet)

上拉菜單(ActionSheet)通過往上彈出的框，來讓用戶選擇選項(xiàng)。

非常危險(xiǎn)的選項(xiàng)會(huì)以高亮的紅色來讓人第一時(shí)間識(shí)別。你可以通過點(diǎn)擊取消按鈕或者點(diǎn)擊空白的地方來讓它消失。

實(shí)例

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 代碼

在代碼中觸發(fā)上拉菜單，需要在你的 angular 控制器中使用 $ionicActionSheet 服務(wù)：

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);

    };  
}])

嘗試一下 ?

運(yùn)行效果如下圖：

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)