Ionic 侧边栏菜单的简单实现

本文介绍如何使用Ionic框架创建一个包含左侧和个人中心内容的侧边栏菜单。通过AngularJS控制器,实现动态加载用户和设置项。代码示例展示了如何组织侧边菜单的基本结构。

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

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值