Question

BottomNavigation组件需要将所有选项卡内容放在同一页上。

例如：

<TabContentItem>
    <GridLayout>
        <Label text="Home Page" class="h2 text-center"></Label>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <Label text="Account Page" class="h2 text-center"></Label>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <Label text="Search Page" class="h2 text-center"></Label>
    </GridLayout>
</TabContentItem>

我认为页面加载就像动态组件一样。我只希望有带有路线链接的标签。当用户点击一个标签时，我会将用户重定向到另一个页面。

如果我不使用TabContentItem，则TabStripItems也不会显示在页面上。因此，我为它们添加了空内容。

使用selectedIndexChange事件，我可以将用户重定向到另一个页面，但是当选项卡链接之一是当前页面时，它将进入无限循环。

在此设置中，选项卡似乎必须位于其他页面上。这不是我想要的东西。

是否可以将BottomNavigation组件转换为基于路线的组件？

这里我当前的代码是：（这是一个Vue项目。）

<template>
    <BottomNavigation selectedIndex="0" @selectedIndexChange="indexChange">
    <TabStrip @itemTap="test">
        <template v-for="(tab, key) in tabs">
        <TabStripItem :key="key">
            <Label :text="tab.title"></Label>
        </TabStripItem>
        </template>
    </TabStrip>
    <template v-for="(tab, key) in tabs">
        <TabContentItem :key="key">
        <GridLayout>
        </GridLayout>
        </TabContentItem>
    </template>
    </BottomNavigation>
</template>

<script>
export default {
    props: {
        tabs: {
            type: Array,
            required: true
        }
    },
    created () {
    },
    methods: {
        indexChange: function (args) {
            let newIndex = args.value
            let route = this.tabs[newIndex].route
            this.goToPage(route)
        },
        goToPage (route) {
            this.$navigator.navigate(route)
        }
    }
}
</script>

如何创建基于路线的BottomNavigation组件？

0 个答案: