Question

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

我从离子框架中读取了所有文档，但很难理解如何搜索我需要的模式来实现这一目标。

有什么建议吗？

Answer 1

最好的选择是使用Segments，因为Tabs会强制您为每个标签设置不同的页面。

您可以在底部创建ion-footer，然后放置SegmentButtons。然后，您可以将地图的高度设置为，例如，60％的内容，然后添加一个div与剩余的高度（40％）。在该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';

    // ...
}

Ionic 2 - 页脚和标签中的标签子脚和内容区域

1 个答案: