Отступление: Views и View
На данный Framework7 не позволяет использовать View во View. Вот так можно делать:
View
Views > View, View,…,View
Вот так нельзя:
View > view
Views > Views > View
Views > View > View
View > Views > View, View, … , View
Но для этого правила есть исключение. Внутри Popup, Popover, Actions Sheet, Login Screen и Sheet Modal можно сделать свое полноценное View, ведь технически оно будет находиться за пределами Current View в DOM.
Какие бывают Tabs
В Framework7 возможно 3 принципиально разных варианта работы вкладок.
Страница содержит весь контент
На странице находится контент всех вкладок, а переключением вкладок мы меняем то, что в данный момент показывается пользователю. “Вглубь” уходить нельзя, открытие новой страницы заменяет текущую полностью.
Когда использовать: когда немного контента и нет сложной логики. Пример: разделы справочного руководства.
Routable Tabs
На странице изначально нет контента вкладок, каждая вкладка имеет свой маршрут загрузки данных. Содержимое конкретной вкладки впервые загружается при первом ее показе, а при последующих открытиях оно может браться из кэша или загружаться заново - за это отвечает параметр unloadTabContent во View.
“Вглубь” уходить нельзя, открытие новой страницы заменяет текущую полностью.
Когда использовать: когда много контента или много вкладок и / или когда нужна вся мощь Router Component для каждой вкладки.
Views as Tabs
В данном случае мы имеем такую структуру: Views > View, где View - это Tab. Получается, что каждая вкладка - это полностью независимая сущность, в которой можно уходить в глубину.
Когда использовать: когда нам нужна полная независимость вкладок. Пример: первая вкладка - лента новостей, вторая - личная почта, третья - список подписок.
При использовании Views as Tabs есть маленькая особенность. Допустим, нам нужно открыть Page, которая не будет иметь отношения ни к одной из вкладок, например, “Настройки”. Мы можем открыть ее только в определенном View, а не в каком-то новом View, который находится за пределами Views. Так как страница общая, то сами ссылки на вкладки на ней не нужны. Для этого есть два варианта:
- Добавить к Page класс no-toolbar (в этом случае будет анимация скрытия при переходе на страницу).
- В pageInit для этой страницы убирать toolbar вручную.
Переход между вкладками
Не важно какие вкладки мы используем, мы можем выбрать такие виды отображения перехода:
- Мгновенный - кликнули, контент обновился.
- Анимационный - переход между вкладками сопровождается анимацией.
- Swipeable - можно свайпом переключаться между вкладками.
Если вы используете Views как Tabs, то ознакомьтесь с этими ссылками, там рассказано как сделать 2 и 3 способ: