Ionic 侧边栏菜单的简单实现

最新推荐文章于 2021-04-22 22:12:47 发布
最新推荐文章于 2021-04-22 22:12:47 发布
阅读量1.5k 收藏
点赞数
分类专栏： 效果初现 文章标签： 父元素ion-side-menus ion-side-menu ion-item ion-list ionic 侧栏菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT666DHW/article/details/78283941
版权 
<!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>
Dewey666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ionic 侧划菜单
02-03
ionic 侧划菜单，可以通过在侧边划动拉出菜单，背景会有渐变效果，顶问导航条固定
ionic side menu侧滑效果
04-03
ionic side menu侧滑效果demo
ionic5 侧边栏ion-menu组件以及底部tabs结合侧边栏ion-menu
u010574271的博客
04-22 808
文章目录说明侧边栏ion-menu组件的基本使用新建项目侧边栏ion-menu使用点击菜单按钮弹出侧边栏侧边栏ion-menuJS实现侧边栏打开功能页面加按钮给ion-menu定义menuId属性控制菜单的页面中引入MenuController 组件初始化构造函数对应方法中通过JS控制侧边栏底部tabs结合侧边栏ion-menu新建tab项目新建页面新建侧边栏给侧边栏菜单添加链接并使其点击后侧边栏关闭 说明 对于侧边栏的相关的相关使用可以参考文档https://ionicframework.com/docs
Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
热门推荐
bboyjoe的博客
02-17 1万+
一． 侧边栏菜单 : ion-side-menus 侧边栏菜单是一个最多包含三个子容器的元素： 默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。 向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。 在ionic中，使用ion-side-menus指令定义侧边栏菜单：
ionic 测滑菜单
zhaoyue960607的博客
03-11 185
.html <ion-content id="menu" #content> 页面内容 ... </ion-content> <!-- 侧滑菜单 --> <app-org-selector [org_list]="org_list" contentId="menu" (onOK)="onOrgChanged($event)"> </app-org-selector> //此处注意:id="menu"与contentId="men.
用Ionic实现侧边栏菜单 滑动效果
IT666DHW的博客
10-19 1021
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">scrip
ionic侧边栏菜单模板APP
06-27
【描述】此模板APP展示了如何在 Ionic 应用中实现侧边栏菜单功能，这是许多现代移动应用的标准设计元素。通过这个模板，开发者可以学习到如何设置和自定义导航结构，以及如何利用 Ionic 的组件和指令来增强用户体验...
ionic 侧栏菜单
01-06
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。 效果图如下所示： 用法 要使用侧栏菜单，添加一个父元素，一个中间内容 ，和一...
ionic 上拉菜单(ActionSheet)实例代码
01-21
上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 实例 HTML 代码 <body ng-app=starter ...
Ionic实现侧边栏
Web+
09-15 2807
angularJs脚本app.js用于为列表填充数据/** * Created by lin on 2016/9/15. */ angular.module('todo', ['ionic']) .controller('TodoCtrl', function($scope) { $scope.tasks = [ { title: 'aaaa' },
ionic3之侧栏菜单与隐藏tabs-yellowcong
03-03 2856
这个地方，是ionic3的案例，这个案例中，主要做了三个事情：1、影藏了默认的返回按钮。2、隐藏了底部导航栏，3、实现侧滑菜单。其实这几样东西看起来挺简单的，但是我也是费了不少时间啊，破玩意刚玩，整得不太明白啊。 代码地址https://gitee.com/yellowcong/ionic实现效果侧滑菜单前台代码<ion-menu [content]="mycontent"> <io
ionic-侧边菜单$ionicSideMenuDelegate
guohao326的博客
05-10 532
html> html ng-app="myApp"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
ionic侧滑菜单
wuchengyayo的博客
11-17 723
1.导入两个包 2.创建作用域和控制器 angular.module("myApp",['ionic']) .controller("demoa",function($scope,$ionicSideMenuDelegate){ $scope.left=["item0","item1","item2","item3","item4","item5","item6",
ionic 设置标题或菜单栏的属性
union89的专栏
03-10 4745
设置菜单栏字体大小，直接在css样式里加 .tab-item{ font-size:1.5em !important; } ionic的框架里很多自带的属性如ion-item title都写了自己的样式自定义样式时可以自己试着调一调。 标题栏都带有.bar设置标题栏的样式需要  .bar  .title{font-size:2em !important; } 感觉挺好玩的。谢谢围
ionic实现类似通讯录的侧边栏字母索引
ZXH2017的博客
02-04 3404
这里需要先说明的是：我拿到的数据是后台已经排好序的，所以我的目的是做滚动到某个高度时侧边栏的字母高亮与其内容对应，并且可以点击侧边栏的某个字母跳到列表对应的地方。 先看看实现后的效果，样式比较简陋： 是不是一眼就看出了侧边栏的字母表不全。是的。一开始我是做完整的26个字母+#，但是因为后台返回的列表内容并不一定包括26个字母+#，有的字母对应
ionic3学习笔记(五)-sidemenu的实现
Dan_2017
12-25 6555
下面是最近整理的一篇ionic3左侧菜单栏的文章。 1，新建一个空白项目 ionic start  myApp blank 2, 要在模板中添加一个切换菜单，所以在模板中添加一个指令按钮menuToggle（我这里的按钮在HomePage导航栏上，这里HomePage也是项目项目初始化加载的初始页面（根页面）） 注意：如果MenuToggle按钮添加到导航栏页面，当
ionic3-menuToggle侧菜单
5big的博客
01-25 3659
ionic3实现侧菜单与ionic1不同。用的是menuToggle控件。 官方参考文档实例：https://github.com/ionic-team/ionic-preview-app/blob/master/src/pages/menus/basic/pages.ts 可以使用命令：ionic start test sidemenu 来建一个带侧菜单的demo。 文件结构 实例
ionic3 操作菜单的使用
qingdatiankong的博客
02-05 828
ionic中，使用ActionSheetController 来实现操作菜单的展示 html编码 操作菜单 ts编码 引入 import { ActionSheetController } from 'ionic-angular' openMenu() { let actionSheet = this.actionsheetCtrl.create(
[Ionic]如何实现一个全局的浮动菜单栏？
moxiaomomo的专栏
12-13 379
需求是实现一个app全局的浮动菜单栏，页面的切换不会影响该菜单栏的显示， 也不会刷新。 在刚开始的时候想以component的方式嵌入到每个page的html里，后来发现页面在跳转的时候，这个菜单栏总是在刷新，效果不太理想。 后来的一个解决方法是，把这个component直接放到了app.component.html里，比如： <ion-app> <ion-router-outl...
ionic侧边栏 ion-side-menus 以及 ion-tap结合侧边 栏详解
最新发布
05-30
Ionic侧边栏是一个非常实用的组件，可以让用户轻松地在不同的页面之间进行导航。ion-side-menus是Ionic中用于创建侧边栏的指令，它提供了多个选项来控制侧边栏的外观和功能。 要使用ion-side-menus指令，需要在HTML中创建一个包含ion-side-menus指令的容器元素。然后，在容器中定义一个ion-side-menu-content指令，用于指定主要内容区域。在主要内容区域中，可以使用ion-nav-view指令来显示不同的页面。 在侧边栏中，可以使用ion-side-menu指令来定义侧边栏的内容。可以在侧边栏中包含任意数量的元素，包括列表、按钮和链接等。 当用户在侧边栏中选择一个项目时，可以使用ion-tap指令来处理点击事件。ion-tap指令可以与ng-click指令一起使用，用于在视图中触发特定的函数或操作。 下面是一个示例代码，展示了如何使用ion-side-menus和ion-tap指令来创建一个具有侧边栏导航的Ionic应用： ``` <ion-side-menus> <!-- 左侧侧边栏 --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">菜单</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-click="openPage('home')">首页</ion-item> <ion-item ng-click="openPage('about')">关于</ion-item> <ion-item ng-click="openPage('contact')">联系我们</ion-item> </ion-list> </ion-content> </ion-side-menu> <!-- 主要内容区域 --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <button class="button button-icon ion-navicon" ng-click="toggleLeft()"> </button> <h1 class="title">我的应用</h1> </ion-header-bar> <ion-nav-view></ion-nav-view> </ion-side-menu-content> </ion-side-menus> ``` 在上面的代码中，我们创建了一个包含ion-side-menus指令的容器元素。在容器中，我们定义了一个包含ion-side-menu指令的左侧侧边栏，并在其中添加了一些项目。在主要内容区域中，我们使用ion-nav-view指令来显示不同的页面，并使用ion-header-bar指令来添加导航栏。在导航栏中，我们添加了一个按钮，用于打开左侧侧边栏，并使用ion-tap指令来处理点击事件。 最后，我们还需要在控制器中定义一个openPage函数，用于在点击侧边栏中的项目时导航到不同的页面。 ``` .controller('MyCtrl', function($scope, $ionicSideMenuDelegate, $state) { $scope.openPage = function(page) { $ionicSideMenuDelegate.toggleLeft(false); $state.go(page); }; $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }); ``` 在上面的代码中，我们定义了一个openPage函数，用于在点击侧边栏中的项目时导航到不同的页面。我们还定义了一个toggleLeft函数，用于打开或关闭左侧侧边栏。在openPage函数中，我们通过$state.go函数来导航到不同的页面，并在导航完成后关闭左侧侧边栏。在toggleLeft函数中，我们使用$ionicSideMenuDelegate.toggleLeft函数来打开或关闭左侧侧边栏。 总之，使用ion-side-menus和ion-tap指令可以轻松创建具有侧边栏导航的Ionic应用，并实现侧边栏中项目的点击事件处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值