Ionic实现侧边栏

最新推荐文章于 2021-01-17 17:34:18 发布

Linda L

最新推荐文章于 2021-01-17 17:34:18 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/lindonglian/article/details/52550713

版权

Ionic 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

angularJs脚本app.js用于为列表填充数据

/**
 * Created by lin on 2016/9/15.
 */
angular.module('todo', ['ionic'])

    .controller('TodoCtrl', function($scope) {
        $scope.tasks = [
            { title: 'aaaa' },
            { title: 'bbbb' },
            { title: 'cccc' },
            { title: 'dddd' }
        ];
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/app.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
        <ion-header-bar class="bar-dark">
            <h1 class="title">Right</h1>
        </ion-header-bar>
        <ion-content>
            <!-- 列表 -->
            <ion-list>
                <ion-item ng-repeat="task in tasks">
                    {{task.title}}
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <h1 class="title">Left</h1>
        </ion-header-bar>
    </ion-side-menu>

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