NativeScript - TabView

TabView 是个重要的导航组建

<TabView #tab >
    <StackLayout *tabItem="{title: 'FEATURED EXAMPLES'}">
        <good></good>
        <good></good>
        <good></good>
        <good></good>
    </StackLayout>
    <StackLayout *tabItem="{title: xx}">
        <good></good>
    </StackLayout>
</TabView>

TabView 和 tabItem都变成指令了
目前 tabItem 只接受一个 title 参数

每一个StackLayout 下最好放其他组建,要不太乱了

xx 是变量,也就是 title 不是 hardcode 在 html 上

 tabView: TabView;
@ViewChild('tab') tab: ElementRef;

    ngAfterViewInit() {
    this.tabView = this.tab.nativeElement;
    this.tabView.selectedIndex = 1;
    this.tabView.selectedColor = new Color("red");
    this.tabView.tabsBackgroundColor = new Color("blue");

    this.tab.nativeElement.on(TabView.selectedIndexChangedEvent, function(arg: SelectedIndexChangedEventData) {
        console.log(arg.oldIndex);
        for (var item in arg) {
            console.log(item);
        }
    })
}

基本操作:
这里由于类型的原因不得不多写一次声明this.tabView = this.tab.nativeElement;

selectedIndex 是哪个 tab 被选中, 从 0 开始
selectedColor 是选中后下面的标记的横线颜色
tabsBackgroundColor 是这个 TabView 下所有 Tab 的背景色

TabView.selectedIndexChangedEvent 用来 handle tab 切换时的操作.能接收到 oldIndex 和 new Index