用Ionic实现侧边栏菜单滑动效果

最新推荐文章于 2020-11-03 15:37:07 发布

Dewey666

最新推荐文章于 2020-11-03 15:37:07 发布

阅读量1k

点赞数

分类专栏：效果初现文章标签： ion-side-menus ion-side-menu ion-list ion-item ion-nav-bar

本文链接：https://blog.csdn.net/IT666DHW/article/details/78283930

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用Ionic实现侧边栏菜单 滑动效果</title>
    <link rel="stylesheet" href="../ionic/css/ionic.css">
    <script src="../ionic/js/ionic.bundle.min.js"></script>
    <script>
        /*  ionic 侧栏菜单：
            一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。*/
        var app = angular.module("myApp",['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) {
                    // org.apache.cordova.statusbar required
                    StatusBar.styleDefault();
                }
            });
        })

            .config(function($stateProvider, $urlRouterProvider) {
                $stateProvider

                    .state('app', {
                        url: "/app",
                        abstract: true,
                        templateUrl: "menu.html",
                        controller: 'AppCtrl'
                    })

                    .state('app.playlists', {
                        url: "/playlists",
                        views: {
                            'menuContent' :{
                                templateUrl: "playlists.html",
                                controller: 'PlaylistsCtrl'
                            }
                        }
                    })


                // if none of the above states are matched, use this as the fallback
                $urlRouterProvider.otherwise('/app/playlists');
            })

            .controller('AppCtrl', function($scope) {
            })

            .controller('PlaylistsCtrl', function($scope) {
                console.log("PlaylistsCtrl");
                $scope.playlists = [
                    { title: 'Reggae', id: 1 },
                    { title: 'Chill', id: 2 },
                    { title: 'Dubstep', id: 3 },
                    { title: 'Indie', id: 4 },
                    { title: 'Rap', id: 5 },
                    { title: 'Cowbell', id: 6 }
                ];
            })

            .controller('PlaylistCtrl', function($scope, $stateParams) {
            })

    </script>

</head>


<body ng-app="myApp">
    <ion-nav-view></ion-nav-view>
    <script id="menu.html" type="text/ng-template">
        <ion-side-menus>
            <ion-pane ion-side-menu-content>
                <ion-nav-bar class="bar-stable nav-title-slide-ios7">
                    <ion-nav-back-button class="button-clear">
                        <i class="icon ion-chevron-left"></i>
                        返回
                    </ion-nav-back-button>
                </ion-nav-bar>
                <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
            </ion-pane>

            <ion-side-menu side="left">
                <header class="bar bar-header bar-stable">
                    <h1 class="title">Left</h1>
                </header>
                <ion-content class="has-header">
                    <ion-list>
                        <ion-item nav-clear menu-close href="#/app/search">
                            Search
                        </ion-item>
                        <ion-item nav-clear menu-close href="#/app/browse">
                            Browse
                        </ion-item>
                        <ion-item nav-clear menu-close href="#/app/playlists">
                            Playlists
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-side-menu>
        </ion-side-menus>
    </script>
    <script id="playlists.html" type="text/ng-template">
        <ion-view title="Playlists">
            <ion-nav-buttons side="left">
                <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
            </ion-nav-buttons>


            <ion-tabs class="tabs-positive tabs-icon-only">

                <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header">
                    <!-- Tab 1 content -->
                    <ion-content>
                        <ion-list>
                            <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
                                {{playlist.title}}
                            </ion-item>
                        </ion-list>

                    </ion-content>
                </ion-tab>

                <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
                    <!-- Tab 2 content -->
                    <ion-content>
                        <h1>About</h1>

                    </ion-content>
                </ion-tab>

                <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
                    <!-- Tab 3 content -->
                    <ion-content>
                        <h1>Settings</h1>

                    </ion-content>
                </ion-tab>

            </ion-tabs>

        </ion-view>
    </script>

</body>
</html>