全局组件使用以避免代码重复(Nativescript-Vue)

时间:2019-02-24 00:40:18

标签: nativescript nativescript-vue

我的nativescript-vue应用在底部有一个tabview,在顶部有一个Stacklayout,用于带有类别的操作栏/标题。我不想在每个页面中重复tabview和标题。如果更改选择其他类别,如何将它们用作全局组件并刷新页面的其余部分?

谢谢!

这是我的代码:

<DockLayout class="screen" stretchLastChild="true">
<ScrollView dock="top">
                <StackLayout orientation="vertical">
                    <GridLayout class="header" rows="auto" columns="*,auto,auto">
                        <Label text="Test" row="0" col="0" verticalAlignment="center"></Label>
                        <Image src="~/assets/images/search.png"
                            verticalAlignment="center" marginRight="25" row="0"
                            col="1" height="22" />
                        <Button class="logoutButton" text="Logout" fontSize="14" verticalAligment="middle" marginRight="10" row="0" col="2" @tap="logout"></Button>
                    </GridLayout>
                    <GridLayout class="tabs" columns="*,*,*,*,*" height="30" :selectedIndex="selectedIndex">
                        <Label class="active" text="Category1" row="0" col="0"></Label>
                        <Label text="Category2" row="0" col="1"></Label>
                        <Label text="Category3" row="0" col="2"></Label>
                        <Label text="Category4" row="0" col="3"></Label>
                        <Label text="Category5" row="0" col="4"></Label>
                    </GridLayout>
                </StackLayout>
            </ScrollView>
            <TabView :selectedIndex="selectedIndex">
              <TabViewItem title="Tab1" iconSource="~/images/icons/coins.png" @tap="goTo1()">
                <Label text="Tab1"/>
              </TabViewItem>
              <TabViewItem title="Tab2" iconSource="~/images/icons/settings.png" @tap="goTo2()">
                <Label text="Tab2"/>
              </TabViewItem>
              <TabViewItem title="Tab3" iconSource="~/images/icons/add_user_male.png" @tap="goTo3()">
                <Label text="Tab3"/>
              </TabViewItem>
            </TabView>
        </DockLayout>

1 个答案:

答案 0 :(得分:2)

您只需要相应地调整框架。使用GridLayout作为应用程序的根,将TabView和StackLayout放置在内部,然后将Frame放置在TabViewItem内,以便在TabViewItem内导航时其他所有内容保持不变。

std::vector<int, std::pmr::polymorphic_allocator<int>>

要在特定标签中导航时,必须提及框架ID,

std::allocator_traits<std::pmr::polymorphic_allocator<int>>