我正在用TabView Layout构建一个应用程序 . 选项卡是我的应用程序的部分,每个部分/选项卡都有自己的自定义组件和ListView .

在github上也被问到:http://github.com/NativeScript/NativeScript/issues/2094

目前,我正在使用iOS模拟器(我尚未在Android上尝试过Tabs) .

我想做的是,在itemTap事件中导航到内部页面,但我想在导航到内部页面时保持底部的选项卡(与本地App Store应用程序或Facebook App的工作方式相同) .

  • 我正在使用 ui/frame 来导航 topmost .

  • 有没有替代最顶级的导航或类似的东西也可以用后退按钮实现完全相同的行为?

  • 我应该为每个标签使用一个框架吗?我怎么做?

我的代码如下:

tabs.xml

<Page loaded="pageLoaded" xmlns:customTab="tabs">
    <TabView>
        <TabView.items>
            <TabViewItem title="Contacts">
                <TabViewItem.view>
                    <customTab:contacts />
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="Enquiries">
                <TabViewItem.view>
                <customTab:enquiries />
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
    </TabView>
</Page>

标签/ Contacts.xml

<GridLayout loaded="onContactsLoaded">
   <ListView items="{{Contacts}}" itemTap="onContactTap">
        <ListView.itemTemplate>
            <Label text="{{name}}"/>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>

标签/ contacts.js

var frameModule = require('ui/frame');
var searchBarModule = require('ui/search-bar');
var Observable = require('data/observable').Observable;

var ContactsPage;
var ContactsData = new Observable();

exports.onContactsLoaded = function(args) {
    ContactsPage = args.object;
    ContactsPage.bindingContext = ContactsData;
    ContactsData.set('Contacts', loadData());
}

exports.onContactTap = function (args) {
    var itemIndex = args.index;
    var list = pageData.get('Contacts');
    console.log('>> list.itemIndex', JSON.stringify(list[itemIndex]));

    frameModule.topmost().navigate({
        moduleName: 'tabs/contact',
        context: list[itemIndex]
    });
}

function loadData() {
    return [
        {name: 'Lorem Ipsum'},
        {name: 'Leo Caseiro'},
        {name: 'Native Script'},
        {name: 'Angular JS'}
    ];
}