Как создать маршрут на основе компонента BottomNavigation? - PullRequest
Новая
       16

Как создать маршрут на основе компонента BottomNavigation?

0 голосов
/ 18 октября 2019

Компонент 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>
...