时间戳

首页 > 解决方案 > 应用加载时，TabView 正在加载所有应用选项卡

ios - 应用加载时，TabView 正在加载所有应用选项卡

问题描述

我刚开始使用 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 的组合来呈现选项卡内容。

非常感谢！

埃德

标签： iosnativescriptnativescript-vue

解决方案

您的问题是您忘记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)
  }
}

推荐阅读