2017-09-05 50 views
1

我希望能夠設置nativescript-bottombar組件的selectedIndex。根據文檔發現here, 我可以通過在底部欄上以編程方式設置它。但是,我很難理解我如何做到這一點。以編程方式創建nativescript-bottom元素

上的XML文件我初始化組件與

<btn:BottomBar class="bottom-tab-bar" tabSelected="tabSelected" titleState="1" items="{{items}}" inactiveColor="#9B9B9B" accentColor="#4955F6"></btn:BottomBar>

而在onPageLoaded事件中,我結合page.bindingContext到我的模型它可以對bottombar的項目。

export class AudibleModel extends Observable { 

    private _counter: number; 
    private _message: string;  
    private _bottomBar: BottomBar; 
    private _articles: ObservableArray<Article>; 

    public items: Array<BottomBarItem> = [ 
     new BottomBarItem(0, "Archive", "ic_archive_black", "#D8D8D8"), 
     new BottomBarItem(1, "My List", "ic_list_black", "#D8D8D8"), 
     new BottomBarItem(2, "Account", "ic_account_circle_black", "#D8D8D8") 
    ]; 

    constructor() { 
     super(); 
     this._bottomBar.items = this.items; 

     this._articles = 

      new ObservableArray([]); 


    } 

    get articles(): ObservableArray<Article> {  
     return this._articles; 
    } 
} 

我不知道如何將視圖和視圖模型鏈接在一起,以便我可以在此處創建組件。如何以編程方式創建/修改組件,以便我可以設置selectedIndex屬性?

回答

0

沒有完全的答案,但一個可能的解決方案似乎是它添加到後面的代碼:

export function tabLoaded(args) { 
    let _bar = args.object as BottomBar; 
    _bar.selectItem(1); 
} 

和XML元素本身:

<btn:BottomBar class="bottom-tab-bar" loaded="tabLoaded" titleState="1" items="{{items}}" inactiveColor="#9B9B9B" accentColor="#4955F6"></btn:BottomBar>