ios - TabView 在应用程序加载时加载所有应用程序选项卡

Question

我刚刚开始使用 Nativescript，所有这些工作给我留下了深刻的印象!

作为将 VueJS Web 应用程序迁移到移动设备的项目的一部分，我正在尝试使用 tabview 并理解这一点。我似乎无法弄清楚的一个因素是我的行为似乎推迟了文档:

The iOS implementation uses UITabBarController. This means that only one TabViewItem can be shown at a given time and only one needs to be loaded. When the user selects a new TabViewItem, we load the new item and unload the previous one._

我的标签 View 如下所示:

<TabView selectedTabTextColor="#d94b3f"
     class="fas"
     fontSize="60"
     androidTabsPosition="bottom"
     androidOffscreenTabLimit="1">
    <TabViewItem title="T1" fontSize="60">
        <GridLayout columns="*" rows="*">
            <Comp1 />
        </GridLayout>
    </TabViewItem>
    <TabViewItem title="T2" fontSize="60">
        <GridLayout columns="*" rows="*">
            <Comp2 />
        </GridLayout>
    </TabViewItem>
    <TabViewItem title="T4" fontSize="60">
        <GridLayout columns="*" rows="*">
            <Comp3 />
        </GridLayout>
    </TabViewItem>
</TabView>

在每个组件 mounted() 中，我添加了一个 console.log('tab_name')。当我加载应用程序时，每个 console.log 都会被加载。根据我在文档中得到的内容，我应该只在导航到选项卡时安装。我错过了什么吗？目前，我唯一的解决方案是使用当前索引和 v-if 的组合来呈现选项卡内容。

非常感谢!

编辑

Answer 1

您的问题是您忘记将 selectedIndex 添加到 TabView。

结果应该是

<TabView selectedTabTextColor="#d94b3f" class="fas"
     fontSize="60" androidTabsPosition="bottom" androidOffscreenTabLimit="1"
     selectedIndex="selectedIndex" @selectedIndexChange="indexChange"
>
    <TabViewItem title="T1" fontSize="60">
        <GridLayout columns="*" rows="*">
            <Comp1 />
        </GridLayout>
    </TabViewItem>
    <TabViewItem title="T2" fontSize="60">
        <GridLayout columns="*" rows="*">
            <Comp2 />
        </GridLayout>
    </TabViewItem>
    <TabViewItem title="T4" fontSize="60">
        <GridLayout columns="*" rows="*">
            <Comp3 />
        </GridLayout>
    </TabViewItem>
</TabView>

methods: {
  indexChange: function(args) {
      let newIndex = args.value
      console.log('Current tab index: ' + newIndex)
  }
}