TabView坚持在ios nativescript的顶部

时间:2016-05-10 09:40:30

标签: nativescript

我使用tab-view显示数据,但在android和IOS方向不同(android顶部和IOS底部),我怎么能像顶部的android一样做ios?还没有设置属性吗?

1 个答案:

答案 0 :(得分:3)

在iOS中无法将标签视图粘贴在顶部。你可以用同样的方式。 SegmentedBar。我给你举个例子:

主page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
    <SegmentedBar selectedIndex="{{ selectedIndex }}">
        <SegmentedBar.items>
            <SegmentedBarItem title="First" />
            <SegmentedBarItem title="Second" />
        </SegmentedBar.items>
    </SegmentedBar>
    <StackLayout visibility="{{ isItemVisible }}" >
        <Label text="Tab1" textWrap="true" />
    </StackLayout>
    <StackLayout visibility="{{ isItemVisibleSecond }}">
        <Label text="Tab2" textWrap="true" />
    </StackLayout>
  </StackLayout>
</Page>

主page.js

var observable_1 = require("data/observable"); // Event handler for Page "navigatingTo" event attached in main-page.xml function navigatingTo(args) {
    // Get the event sender
    var page = args.object;
    var observable = new observable_1.Observable();
    observable.set("selectedIndex", 0);
    observable.set("isItemVisible", "visible");
    observable.set("isItemVisibleSecond", "collapsed");
    observable.addEventListener(observable_1.Observable.propertyChangeEvent, function (pcd) {
        console.log(pcd.eventName.toString() + " " + pcd.propertyName.toString() + " " + pcd.value.toString());
        if (pcd.propertyName.toString() == 'selectedIndex') {
            if (pcd.value.toString() == 0) {
                observable.set("isItemVisible", "visible");
                observable.set("isItemVisibleSecond", "collapsed");
            }
            else {
                observable.set("isItemVisible", "collapsed");
                observable.set("isItemVisibleSecond", "visible");
            }
        }
    });
    page.bindingContext = observable;
}
exports.navigatingTo = navigatingTo;