zoukankan      html  css  js  c++  java
  • 7、侧边栏:Menu

    1、单个侧边栏
    导航的代码在分析源码的时候已经分析过了,下面只看他的一些应用与方法。
    /* ---示例代码----*/
     
    <ion-menu [content]="mycontent">
      <ion-content>
        <ion-list>
        ...
        </ion-list>
      </ion-content>
    </ion-menu>
     
    <ion-nav #mycontent [root]="rootPage"></ion-nav>
     
    /* ---示例代码----*/
    上边的代码其实就生成了一个简单的 view
    值得注意的 是 #mycontent  [content]="mycontent其实就形成了一个绑定 告诉 侧边栏 我的内容是 ion-nav里的。
    因为ionic 他是把侧边栏的content写到 ion-side-menus 里面的。。所以这里ionic2 比较人性化。代码不会一坨一坨的分不清哪个是写侧边栏列表的,哪个是写内容的。
     
    2、多个侧边栏 和 MenuController API
    /* ---示例代码----*/
     
    <ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
    <ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
     
    <ion-nav #mycontent [root]="rootPage"></ion-nav>
     
    /* ---示例代码----*/
    先看side,side是控制侧边栏在左侧或右侧,默认是左侧。主要看 id , id的值要是唯一的 。我们给每一个ion-menu 设置了一个id 这个时候 页面进来的时候
    那个ion-menu侧边栏在最上面 。就显示哪个 。
    导入:import { MenuController } from 'ionic-angular';
    我们需要 用 MenuController 来控制 侧边栏的一些方法。其中 this.menu.enable(); 方法就是用来控制多个侧边栏的展示
    他可以传两个参数 或者 一个参数。 
        1、两个参数 的话 第一个参数 代表是否显示 第二个参数 是 menuId 值
        2、一个参数的话 就是 menuId 一旦设置一个参数的话其他的侧边栏 也将会隐藏
    /* ---示例代码----*/
     
    enableAuthenticatedMenu() {
     
      this.menu.enable(true, 'authenticated');
      this.menu.enable(false, 'unauthenticated');
      //或者
      this.menu.enable('authenticated');
     
    }
     
    /* ---示例代码----*/
    MenuController 还有 很多方法。
        1、打开 open()
        2、关闭 close() 这个方法可以带一个参数 menuId
        3、切换 toggle(menuId) 这个方法可以带一个参数 menuId 当侧边栏打开则关闭,关闭则打开
        4、enable(showmenuId) 控制多个侧边栏。两个参数或一个参数。
        5、swipeEnable(shouldEnable,menuId)  第一个参数代表是否禁用,第二个参数是 哪个menuId
        6、isOpen() 侧边栏是否打开。
        7、isEnabled() 判断有没有侧边栏能够被打开。
        8、get(menuId) 返回一个侧边栏的实例
        9、getMenus() 返回所有侧边栏的实例。

    3、侧边栏的API
     
    例如:
    <ion-menu id="menu" [content]="content"  >
     
    1、content      对应内容。
    2、id    侧边栏Id
    3、side   侧边栏的位置
    4、type   侧边栏的显示类型
    5、enabled    侧边栏是否可用
    6、swipeEnabled   侧边栏是否可以滑动展出
    7、persistent   是否应该坚持子页面菜单。
  • 相关阅读:
    Lucene in action 笔记 case study
    关于Restful Web Service的一些理解
    Lucene in action 笔记 analysis篇
    Lucene in action 笔记 index篇
    Lucene in action 笔记 term vector
    Lucene in action 笔记 search篇
    博客园开博记录
    数论(算法概述)
    DIV, IFRAME, Select, Span标签入门
    记一个较困难的SharePoint性能问题的分析和解决
  • 原文地址:https://www.cnblogs.com/dandingjun/p/5562564.html
Copyright © 2011-2022 走看看