Question

我正在使用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'}
    ];
}

NativeScript：TabView

0 个答案: