Ionic 侧边栏菜单的简单实现

来源：互联网发布：尔雅网络课程密码编辑：程序博客网时间：2024/05/21 09:43
<!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>        var app = angular.module("myApp",['ionic']);        app.controller("myCtrl",function ($scope) {            $scope.settings = ["关注","粉丝","收藏","设置"];            $scope.users = ["狗剩","喜娃","二愣子"];        });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <!--        ionic 侧栏菜单        一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。           用法：           使用侧栏菜单，添加一个父元素<ion-side-menus>，           一个中间内容 <ion-side-menu-content>，           一个自定义左右侧菜单 <ion-side-menu> 指令。    -->    <!-- 1. 父元素<ion-side-menus> -->    <ion-side-menus>        <!--  2. 中间内容 <ion-side-menu-content> -->        <ion-side-menu-content>            <ion-header-bar align-title="center" class="bar-calm">                <h1 class="title">主页 Content</h1>            </ion-header-bar>            <ion-content>                <ion-list>                    <ion-item ng-repeat="item in users">                        {{item}}                     </ion-item>                </ion-list>            </ion-content>        </ion-side-menu-content>       <!-- 3. 自定义左右侧菜单 <ion-side-menu> 指令-->            <!--左侧菜单-->        <ion-side-menu side="left">            <ion-header-bar align-title="left" class="bar-light">                <h2 class="title">个人中心</h2>            </ion-header-bar>            <ion-content>                <ion-list>                    <ion-item ng-repeat="item in settings">                        {{item}}                    </ion-item>                </ion-list>            </ion-content>        </ion-side-menu>            <!--右侧菜单-->        <ion-side-menu side="right">            <h3 align="center">这里是：<br>右侧菜单side-menu</h3>        </ion-side-menu>    </ion-side-menus></body></html>
阅读全文
0 0