我可以将BottomNavigation与组件一起使用吗？

Question

我试图显示一个底部导航，其中TabContent来自组件。现在，使用以下代码，我无法显示标签内容，也不会出现任何错误。

PageContainer.vue：

<template>
   <BottomNavigation selectedIndex="1" class="tab__container" @loaded="loaded">
     <TabStrip>
       <TabStripItem class="tab">
         <Label :text="text.groups" />
       </TabStripItem>

       <TabStripItem class="tab">
         <Label :text="text.mail" />
       </TabStripItem>
     </TabStrip>

     <TabContentItem>
       <GroupsScreen />
     </TabContentItem>

     <TabContentItem>
       <MailScreen />
     </TabContentItem>
   </BottomNavigation>
 </template>

<script >
   import GroupsScreen from './GroupsScreen';
   import MailScreen from './MailScreen';

   export default {
     components: {
       GroupsScreen,
       MailScreen,
     },

     data() {
       return {
           text: {
             groups: 'Groepen',
             mail: 'Berichten',
           },
       }
     },
   }
</script>

GroupsScreen.vue：

<template>
   <Frame @loaded="loaded">
       <ActionBar :title="text.groups" />
       <StackLayout class="page">
         <Label v-if="groupsLoading" text="Loading"></Label>
       </StackLayout>
   </Frame>
 </template>

这是否有可能，或者我是否正在尝试做另一种应做的事情？

Answer 1

层次始终是

1. 框架
2. 页面
3. 内容（布局，ScrollView等）

框架只能托管页面，而不能直接托管内容。仅当您要在该特定容器中导航时才需要Frame。

因此，您的主要问题不是用 Page 元素包装 BottomNavigation 。

Updated Playground