Ionic 侧边栏菜单的简单实现

57 阅读 0 评论 38 点赞

我是靠谱客的博主勤奋自行车，最近开发中收集的这篇文章主要介绍Ionic 侧边栏菜单的简单实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>