Question

我希望能够设置nativescript-bottombar组件的selectedIndex。根据{{3}}找到的文件，我可以通过在底栏上以编程方式设置它来实现。但是，我无法理解如何做到这一点。

在xml文件中，我使用

初始化组件

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

在onPageLoaded事件中，我将page.bindingContext绑定到我的模型，该模型包含底栏的项目。

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属性？

Answer 1

不完全是答案，但可能的解决方案似乎是将其添加到后面的代码中：

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>

以编程方式创建nativescript-bottom元素

1 个答案: