Question

我使用CLI创建了一个新的nativescript项目，然后选择了“选项卡导航”。我现在有默认的3个标签，而我找不到如何使默认/选定的标签成为最右边/中央的标签。我已经尝试过移动选项卡，因为它始终是最先加载的最左侧。

<TabView androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

Answer 1

尝试

<TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

并在您的ts文件中：

 public tabSelectedIndex: number=1; //for example

希望有帮助。

Answer 2

使用此代码。

1。 app.component.html：-

 <TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

 <page-router-outlet
    *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
    name="homeTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
    name="browseTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
    name="searchTab">
 </page-router-outlet>

</TabView>

2。 app-routing.module.ts：-

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{
    path: "",
    redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
    pathMatch: "full"
},
{
    path: "home",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/home/home.module#HomeModule",
    outlet: "homeTab"
},
{
    path: "browse",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/browse/browse.module#BrowseModule",
    outlet: "browseTab"
},
{
    path: "search",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/search/search.module#SearchModule",
    outlet: "searchTab"
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

如何在nativescript中定义默认的TabView？

2 个答案: