Question

我正在使用离子框架。我需要像这样的滑动标签和侧面菜单

enter image description here

有什么想法吗？如何实现这个uisng离子框架？

enter image description here

我尝试了离子标签。页脚显示，但没有菜单图标

由于

Answer 1

如果要使用选项卡实现离子侧菜单，则必须使用路由系统的配置。

首先，你需要为菜单设置一个抽象状态：

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
})

然后你需要为主标签（容器）和每个标签添加状态：

.state('app.tabs', {
    url: "/tabs",
    views: {
        'menuContent': {
            templateUrl: "tabs.html",
        }
    }
})

.state('app.tabs.articles', {
    url: "/articles",
    views: {
        'articles-tab': {
        templateUrl: "articles.html",
        controller: 'articlesCtrl'
        }
    }
})

.state('app.tabs.colonies', {
    url: "/colonies",
    views: {
        'colonies-tab': {
        templateUrl: "colonies.html",
        controller: 'coloniesCtrl'
        }
    }
});

正如您所看到的，每个州都从主要州继承：app。

菜单（menu.html）：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
         <ion-item nav-clear menu-close href="#/app/tabs">
            Articles & Colonies
         </ion-item>
        <ion-item nav-clear menu-close href="#/app/foo">
            Foo
        </ion-item>        
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

是您可以从文档中复制的标准侧边菜单然后你需要一个标签模板（tabs.html）：

<ion-view view-title="Articles & Colonies">
    <ion-tabs class="tabs-striped tabs-top tabs-color-assertive">

      <ion-tab title="Articles" ui-sref="app.tabs.articles" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline">
            <ion-nav-view name="articles-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Colonies" ui-sref="app.tabs.colonies" icon-on="ion-ios-color-filter" icon-off="ion-ios-color-filter-outline">
            <ion-nav-view name="colonies-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
</ion-view>

这是您要添加到视图中的所有标签的主要容器。它由州app.tabs引用如您所见，每个<ion-tab>都包含<ion-nav-view>。

属性ui-sref加载单个标签的状态 <ion-nav-view>的名称设置为：

<ion-nav-view name="articles-tab"></ion-nav-view>

此名称必须与配置状态中定义的名称匹配：

.state('app.tabs.articles', {
    url: "/articles",
    views: {
        'articles-tab': {
        templateUrl: "articles.html",
        controller: 'articlesCtrl'
        }
    }
})

最后要做的是为文章和殖民地（articles.html）添加视图（模板）：

<ion-view view-title="Articles">
  <ion-content>
    <div class="card">
      <div class="item item-text-wrap">
        Article 1
      </div>
      <div class="item item-text-wrap">
        Article 2
      </div>
      <div class="item item-text-wrap">
        Article 3
      </div>      
    </div>
  </ion-content>
</ion-view>

注意：

对于iOS，标签将显示在屏幕底部。对于Android，选项卡将位于导航栏下方的屏幕顶部。这是如下每个操作系统的设计规范，但可以配置 $ ionicConfigProvider。

参考here。

由于您希望自己的标签位于顶部，因此我使用了css类tabs-top。使用$ionicConfigProvider和tabs.position(value)可以实现同样的效果。

参考here。

最简单的方法是稍微播放plunker，看看它是如何工作的。

如何在侧面菜单上实现选项卡

1 个答案: