angular ionic 侧滑

最新推荐文章于 2021-03-11 09:00:21 发布

-久了久了就旧了

最新推荐文章于 2021-03-11 09:00:21 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiaozhang0414/article/details/78811086

angular代码专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Ionic框架创建一个带有侧边菜单的应用。主要内容包括HTML结构定义、样式设置及AngularJS控制器的交互逻辑实现。通过按钮触发侧边菜单的展开与收起，并展示了一个包含多个列表项的左侧菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!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.css"/>
    </head>

    <body ng-app="myapp" ng-controller="mycontroller">
        <ion-side-menus>
            <ion-side-menu-content>
                <ion-header-bar class="bar-positive">
                    <button ng-click="toss()" class="button button-small">☰</button>

                    <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("myapp", ["ionic"]);
    mo.controller("mycontroller", function($scope, $ionicSideMenuDelegate) {
        $scope.toss = function() {
            alert(123);
            $ionicSideMenuDelegate.toggleLeft()
        }
    })
</script>