如何在离子中定位多个视图

Posted 2023-02-19

【中文标题】如何在离子中定位多个视图

【英文标题】：how to position multiple views in ionic

【发布时间】：2015-02-07 22:36:08

【问题描述】：

我正在尝试使用 ionic 框架来构建一个内容菜单，该菜单有 2 个部分，来自不同的控制器。我在下面将它们指定为view: menuContent 和view: menuSubcontent。

html

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="main bar-stable nav-title-slide-ios7">
            <ion-nav-back-button class="button-clear"><i class="icon"></i></ion-nav-back-button>
        </ion-nav-bar>

        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
        <ion-nav-view name="menuSubcontent"></ion-nav-view>

    </ion-side-menu-content>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
            <h1 class="title">Left</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close ng-click="login()">
                    Login
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/morestuff">
                    etc.
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

路由器

.state('app.playlists', 
    url: "/playlists",
    views: 
        'menuContent': 
            templateUrl: "templates/playlists.html",
            controller: 'PlaylistsCtrl'
        ,
        'menuSubcontent': 
            template: "<span>subcontent of playlists</span>"
            
        
    )

当页面呈现时，<ion-nav-view name="menuSubcontent"> 是不可见的，尽管它在 DOM 中。我添加了一些 CSS 属性使其可见：

z-index: 2
margin-top: 400px; /* some arbit large number */

我想知道这是否是正确的方法（将我自己的 css 类添加到 menuSubcontent 中）或者是否有系统的方法来使用框架来消除 guesswork 在多个视图中的定位。我还在学习如何使用这个框架。

【问题讨论】：

嗨，Dinesh，你解决了这个问题吗？

Codepen 可能会帮助我们其他人更轻松地尝试解决问题并提出一些建议。

【参考方案1】：

<ion-side-menus ng-controller="SideMenuController">

  <!-- Header Changes -->
  <ion-side-menu-content drag-content="false">
    <ion-nav-bar class="bar bar-header bar-positive">

      <!-- Open Sidebar Menu Start-->
      <ion-nav-buttons side="left">
        <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
      </ion-nav-buttons>
      <!-- Open Sidebar Menu End -->

      <ion-nav-back-button class="button-clear">
        <i class="ion-chevron-left"></i> Back
      </ion-nav-back-button>

      <!-- Open Sidebar Menu Start-->
      <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-refresh" ng-click="doRefresh()"></button>
      </ion-nav-buttons>
      <!-- Open Sidebar Menu End -->

    </ion-nav-bar>

    <ion-nav-view name="main" animation="slide-left-right">
    </ion-nav-view>

  </ion-side-menu-content>
  <!-- Header Changes -->

  <!-- SideMenu Contents -->
  <ion-side-menu side="left" class="light-bg dark-border">

    <header class="bar bar-header bar-light">
      <h1 class="title">Route Menu</h1>
    </header>

    <ion-content class="has-header">
      <div class="list">

        <a menu-close class="item item-icon-left" href="#/app/home">
          <i class="icon fa fa-bank fa-ionicon"></i>
          Home
        </a>

    </ion-content>
    <!-- SideMenu Contents -->
  </ion-side-menu>


</ion-side-menus>



    //** abstract route for sidemenu
    $stateProvider.state('app', 
      url: '/app',
      abstract: true,
      templateUrl: 'templates/sidemenu.tpl.htm'

    );

    //!** Home
    $stateProvider.state('app.home', 
      url: '/home',
      views: 
        'main': 
          templateUrl: 'app/home/home.tpl.htm'
        
      

    );

在您的路线中将您的模板定义为抽象： 来源：http://codepen.io/ionic/pen/vqhzt

【参考方案2】：

如果您在同一页面中保留多个，则必须如下配置，

<ion-tab title="Rooms" icon-off="ion-ios7-box-outline" icon-on="ion-ios7-box" href="#/tab/rooms">
    <ion-nav-view name="tab-rooms"></ion-nav-view>
</ion-tab>

<ion-tab title="Chat" icon-off="ion-ios7-chatboxes-outline" icon-on="ion-ios7-chatboxes" href="#/tab/chat">
    <ion-nav-view name="tab-chat"></ion-nav-view>
</ion-tab>

所以基于 url 适当的视图会得到渲染，

否则，您可以为每个视图创建单独的状态，如下所示，

.state('menuLogin', 
url: '/menuLogin',
abstract: true,
templateUrl: 'templates/loginMenu.html'

)

.state('menuMain', 
url: '/menuMain',
cache:false,
abstract: true,
templateUrl: 'templates/mainMenu.html'
)

.state('menuLogin.login', 
url: '/login',
views: 
  'menuContent': 
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl'
  

)

.state('menuMain.main', 
url: '/main',
views: 
  'menuContent': 
    templateUrl: 'templates/main.html',
    controller: 'MainCtrl'
  

)

所以第一个状态属于登录菜单，第二个属于主菜单。

登录菜单.html：

<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view>

和 Mainmenu.html ：

<ion-nav-bar class="bar-positive" align-title="center" style="text-align:center;">
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view>

所以你可以像这样自定义状态。

希望对你有所帮助。