Question

我只是从Nativescript开始，所有的工作给我留下了深刻的印象！

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

iOS实现使用UITabBarController。这意味着在给定的时间只能显示一个TabViewItem，并且仅需要加载一个。当用户选择一个新的TabViewItem时，我们将加载新项目并卸载前一个项目。_

我的标签视图如下：

<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的组合来呈现标签内容。

非常感谢！

Ed

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)
  }
}

当应用加载时，TabView会加载所有应用选项卡

1 个答案: