如何在不点击导航栏的情况下使用 BottomNavigation 进行导航

Posted 2023-04-13

【中文标题】如何在不点击导航栏的情况下使用 BottomNavigation 进行导航

【英文标题】：How to navigate using BottomNavigation without tapping the navbar

【发布时间】：2020-09-30 00:56:40

【问题描述】：

如果您使用的是 NativeScript Vue 选项卡导航，我有一个关于导航的问题。我正在使用 NativeScript 团队提供的 NativeScript Vue 选项卡导航模板 (https://market.nativescript.org/plugins/tns-template-tab-navigation-vue)，并尝试使用 Browse 组件中的一个简单按钮从 Browse 组件导航到 Items 组件。因此，我希望能够导航到另一个组件，而无需单击模板中提供的选项卡之一。谁能指出我正确的方向？干杯！

App.vue:
<template lang="html">
    <BottomNavigation>
        <TabStrip>
            <TabStripItem class="navigation__item">
                <Label text="Home"></Label>
                <Image src.decode="font://&#xf015;" class="fas t-36"></Image>
            </TabStripItem>
            <TabStripItem class="navigation__item">
                <Label text="Browse"></Label>
                <Image src.decode="font://&#xf1ea;" class="far t-36"></Image>
            </TabStripItem>
            <TabStripItem class="navigation__item">
                <Label text="History"></Label>
                <Image src.decode="font://&#xf002;" class="fas t-36"></Image>
            </TabStripItem>
        </TabStrip>
        <TabContentItem>
            <Frame id="items">
                <Items/>
            </Frame>
        </TabContentItem>
        <TabContentItem>
            <Frame id="browse">
                <Browse/>
            </Frame>
        </TabContentItem>
        <TabContentItem>
            <Frame id="search">
                <History/>
            </Frame>
        </TabContentItem>
    </BottomNavigation>
</template>
<script>
    import Items from "./Items.vue";
    import Browse from "./Browse.vue";
    import History from "./History.vue";
    export default 
        components: 
            Items,
            Browse,
            History
        
    ;
</script>
<style lang="scss">
    // Start custom common variables
    @import "~@nativescript/theme/scss/variables/blue";
    // End custom common variables
    // Custom styles
</style>

Browse component:
<template lang="html">
    <Page>
        <ActionBar>
            <Label text="Browse"></Label>
        </ActionBar>
        <GridLayout class="page__content">
            <Label class="page__content-icon far" text.decode="&#xf1ea;"></Label>
            <Button @tap="navigate" >navigate to Items</Button>
            <Label class="page__content-placeholder" :text="message"></Label>
        </GridLayout>
    </Page>
</template>
<script>
    import Items from "./Items";
  export default 
      components: 
          Items
      ,
    data() 
      return 
        message: "<!-- Browse page content goes here -->"
      ;
    ,
      methods: 
          navigate() 
              this.$navigateTo(Items);
          
      
  
</script>
<style lang="scss" scoped>
    // Start custom common variables
    @import "~@nativescript/theme/scss/variables/blue";
    // End custom common variables
    // Custom styles
</style>

【参考方案1】：

您应该能够使用BottomNavigation 的selectedIndex 属性来设置单击按钮时应选择哪个选项卡。

<BottomNavigation :selectedIndex="selectedIndex">