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

Я только начинаю работать с 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 («tab_name»). Когда я загружаю приложение, загружаются все console.log. Из того, что я получил в документе, я должен монтироваться только при переходе на вкладку. Я что-то упускаю? На данный момент единственное решение, которое у меня есть, - это использовать комбинацию текущего индекса и v-if для визуализации содержимого вкладки.

Большое спасибо!

Ed


ios nativescript nativescript-vue
person Doud    schedule 03.07.2019    source источник
comment
У меня такая же проблема, у вас есть решение?   -  person scholarwithfire    schedule 10.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

Ваша проблема в том, что вы забыли добавить 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)
  }
}
person Steven    schedule 03.07.2019
comment
Замечательно, я сразу посмотрю на это и посмотрю, как дела. - person Doud; 03.07.2019
comment
Извините за поздний ответ, я еще не смог его проверить. Таким образом, мой код выглядит точно так же, как тот, который вы отправили, и у меня все еще три смонтированных триггера работают одновременно. Индекс текущей вкладки console.log возвращает NaN при загрузке, а затем возвращает правильный индекс при навигации. Я. все еще делаю некоторые тесты, чтобы лучше понять это. - person Doud; 05.07.2019
comment
Вы добавили selectedIndex к своим данным? И установить его на 1? - person Steven; 08.07.2019
comment
То же самое :( Извините за поздний ответ, на этой неделе я в отпуске. - person Doud; 10.07.2019
comment
Нет проблем, найдите время, чтобы расслабиться и получить удовольствие, если бы у вас было время, можно было бы сделать пример детской площадки? play.nativescript.org/?template=play-vue - person Steven; 11.07.2019