ionic侧栏菜单案例

最新推荐文章于 2025-12-16 22:10:41 发布

原创最新推荐文章于 2025-12-16 22:10:41 发布 · 910 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文深入浅出地介绍了如何在Ionic应用中实现侧栏菜单的功能，适合 Ionic 初学者。通过阅读，你可以掌握创建、配置及使用Ionic侧栏菜单的步骤和技巧。

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
    </head>

    <body ng-app="mmp" ng-controller="mCtrl">
        <ion-side-menus>
            <ion-side-menu-content>
                <ion-header-bar class="bar-positive">
                    <button ng-click="toss()" class="button button-small">☰</button>
                    <!--
                    <i class="icon ion-star"></i>
                    <i class="icon ion-happy-outline"></i>
                    <i class="icon ion-ios-analytics"></i>
                    <i class="icon ion-ios-eye"></i>
                -->
                    <h1 class="title"> side me</h1>
                </ion-header-bar>

                <ion-content>
                    <h3 style="display:inline-block">Content</h3>
                </ion-content>

            </ion-side-menu-content>

            <ion-side-menu side='left'>
                <ul class="list">
                    <li class="item">item1</li>
                    <li class="item">item2</li>
                    <li class="item">item3</li>
                    <li class="item">item4</li>
                    <li class="item">item5</li>
                    <li class="item">item6</li>
                    <li class="item">item7</li>
                    <li class="item">item8</li>
                    <li class="item">item9</li>
                    <li class="item">item10</li>
                    <li class="item">item11</li>
                    <li class="item">item12</li>
                    <li class="item">item13</li>
                    <li class="item">item14</li>
                    <li class="item">item15</li>
                </ul>

            </ion-side-menu>
        </ion-side-menus>
    </body>

</html>
<script type="text/javascript">
    var mo = angular.module("mmp", ["ionic"])
    mo.controller("mCtrl", function($scope, $ionicSideMenuDelegate) {
        $scope.toss = function() {
            $ionicSideMenuDelegate.toggleLeft()
        }
    })
</script>

》》》ionic菜鸟教程详解

标签

#ionic