Question

如何将我的Tabview项目停靠在屏幕左侧，如下图所示？

这就是我目前的布局。

<TabView dock="left" tabsBackgroundColor="red" selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
    <StackLayout tabsBackgroundColor="red" *tabItem="{ iconSource: 'res://ic_ham'}" >
    </StackLayout>
    <StackLayout *tabItem="{title: 'Home'}">
            <ns-home></ns-home>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Bookings'}">
            <ns-booking></ns-booking>
    </StackLayout>
</TabView>

产生的布局

Answer 1

对于您的需求可能有点过分，但我发现最简单的是通过禁用当前按钮和添加新标签按钮，将标签按钮更改为完全可设计和可自定义。 / p>

<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *">
    <label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label>
    <label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label>
    <label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label>
    <TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)">
      <StackLayout class="tab" *tabItem="{title: 'Tab1'}">
          <Label text="tab1 body"></Label>
      </StackLayout>
      <StackLayout class="tab" *tabItem="{title: 'Tab2'}">
          <Label text="tab2 body"></Label>
      </StackLayout>
      <StackLayout class="tab" *tabItem="{title: 'Tab3'}">
          <Label text="tab3 body"></Label>
      </StackLayout>
    </TabView>
</StackLayout>

在代码中：

为选择按钮时添加点击事件处理程序，并为其指定一个自定义选定的类（用于样式设置）
使用标签加载事件隐藏默认标签按钮：

onTabsLoaded(): void{
    let tabViewElement = <TabView>this.tabView.nativeElement;
    if (tabViewElement && tabViewElement.android) {
        tabViewElement.android.removeViewAt(0);
    } else {
        tabViewElement.ios.tabBar.hidden = true;
    }
};

并且有点css，我们的结果是：

希望这有帮助，祝你好运！

如何在nativescript中自定义tabview？

1 个答案: