离子2 - 在页脚和subfooter＆内容区域

Question

什么是Ionic的方法，如果我们需要实现一个页面，其中标签只改变一个副主空间，而主要内容区域保持不变（有一个谷歌地图和标签正在改变用户可以应用的不同仪器）。

我从离子框架阅读所有的文档，但它很难理解如何搜索我需要的模式来完成这一点。

有什么建议吗？

Answer 1

最好的办法是使用Segments因为Tabs会迫使你必须为每个标签不同的页面。

您可以在底部创建ion-footer，并在那里放置SegmentButtons。然后，您可以将地图的高度设置为例如60％的内容，然后在其余高度（40％）中添加一个div。在该div的内部，您需要放置每个细分的内容。这将是这样的：

<ion-header> 
    <ion-navbar color="primary"> 
     <ion-title>Your PageName</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <!-- Map section --> 
    <div class="map" style="height:60%;"> 
     <!-- Here you would display the map --> 
    </div> 

    <!-- Additional UI section --> 
    <div class="additional-div" style="height:40%;"> 

     <div [ngSwitch]="selectedSection"> 

      <div *ngSwitchCase="'tabButtonOne'"> 
       <!-- Content to show when the fist tab button is selected --> 
       <!-- ... --> 
      </div> 

      <div *ngSwitchCase="'tabButtonTwo'"> 
       <!-- Content to show when the second tab button is selected --> 
       <!-- ... --> 
      </div> 

      <div *ngSwitchCase="'tabButtonThree'"> 
       <!-- Content to show when the third tab button is selected --> 
       <!-- ... --> 
      </div> 

     </div> 

    </div> 

</ion-content> 
<ion-footer> 
    <ion-toolbar color="primary"> 
     <ion-segment [(ngModel)]="selectedSection" color="light"> 
      <ion-segment-button value="tabButtonOne"> 
       Tab button 1 
      </ion-segment-button> 
      <ion-segment-button value="tabButtonTwo"> 
       Tab button 2 
      </ion-segment-button> 
      <ion-segment-button value="tabButtonThree"> 
       Tab button 3 
      </ion-segment-button> 
     </ion-segment> 
    </ion-toolbar> 
</ion-footer> 

然后在您的组件代码，我们用它来存储选定段的值的属性：

@Component(...) 
export class YourPage { 

    // Select the first segment by default... 
    public selectedSection = 'tabButtonOne'; 

    // ... 
}