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

Posted 2023-04-13

【中文标题】应用加载时，TabView 正在加载所有应用选项卡

【英文标题】：TabView is loading all app tabs when the app loads

【发布时间】：2019-11-14 00:08:47

【问题描述】：

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

非常感谢！

埃德

【问题讨论】：

我也有同样的问题，请问有解决办法吗？

【参考方案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)
  

【讨论】：

太棒了，我马上去看看，看看情况如何。

抱歉回复晚了，我还没来得及测试。所以我的代码看起来和你发送的一模一样，而且我仍然有 3 安装一次触发。 console.log“当前选项卡索引”在加载时返回 NaN，然后​​在导航时返回正确的索引。我是。仍在进行一些测试以更好地理解这一点。

您是否将selectedIndex 添加到您的数据中？并将其设置为 1？

同样的事情 :( 抱歉回复晚了，我这周放假了。

没问题，慢慢来放松和享受，如果你有时间，可以做一个游乐场的例子吗？ play.nativescript.org/?template=play-vue