TabView загружает все вкладки приложения при загрузке приложения

Question

Я только начинаю с Nativescript, и я действительно впечатлен всей этой работой!

В рамках проекта по переносу веб-приложения VueJS на мобильные устройства я пытаюсь поработать с 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 («имя_таблицы»). Когда я загружаю приложение, каждый 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)
  }
}