Skip to main content

Сторінка

Навігація

Сторінка

Сторінка — це один із основних компонентів (контейнерів), який використовується для відображення вмісту застосунку.

Макет сторінки 

<div class="page" data-name="home">
  <div class="page-content">
    ... scrollable page content goes here ...
  </div>
</div>

Назва сторінки

Як ви можете помітити, кожна сторінка має data-name атрибут з унікальною назвою сторінки. Це не обов’язково, але може бути корисним у «подіях сторінки» або «зворотних викликах сторінки». Це може допомогти нам визначити, яка сторінка завантажена та доступна, щоб ви могли виконувати необхідні маніпуляції на сторінці.

Вміст сторінки

Увесь візуальний вміст (як-от перегляди списків, форми тощо) слід розміщувати всередині, <div class="page-content">який має бути дочірнім елементом <div class="page">. Це необхідно для правильного стилю, компонування та прокручування.

Події сторінки

Тепер давайте розглянемо одну з найважливіших частин навігації сторінкою, «події сторінки». Події сторінок дозволяють нам маніпулювати щойно завантаженими сторінками, виконуючи JavaScript для цих конкретних сторінок:
ПодіяОб'єктОпис
page:mounted
Елемент сторінки

<div class="page">

Подія буде ініційована, коли нова сторінка щойно вставлена в DOM. Або коли сторінка з keepAlive маршрутом монтується/приєднується до DOM
page:init
Елемент сторінки

<div class="page">

Подія буде запущена після того, як Techno4 ініціалізує необхідні компоненти сторінки та панель навігації navbar
page:reinit
Елемент сторінки

<div class="page">

Ця подія буде ініційована у разі переходу на сторінку, яка вже була ініціалізована.
page:beforein
Елемент сторінки

<div class="page">

Подія буде ініційована, коли все буде ініціалізовано і сторінка буде готова до переходу в режим перегляду (в активне/поточне положення)
page:afterin
Елемент сторінки

<div class="page">

Подія буде ініційована після переходу сторінки у режим перегляду
page:beforeout
Елемент сторінки

<div class="page">

Подія буде ініційована безпосередньо перед тим, як сторінку буде виведено з поля зору
page:afterout
Елемент сторінки

<div class="page">

Подія буде ініційована після переходу сторінки з поля зору
page:beforeunmount
Елемент сторінки

<div class="page">

Подія буде ініційована, коли сторінку з keepAlive маршрутом буде демонтовано/від’єднано від DOM
page:beforeremove
Елемент сторінки

<div class="page">

Подія буде ініційована безпосередньо перед видаленням сторінки з DOM. Ця подія може бути дуже корисною, якщо вам потрібно від'єднати деякі події / знищити деякі плагіни, щоб звільнити пам'ять. Ця подія не буде ініційована для keepAlive маршрутів.
page:tabshow
Елемент сторінки

<div class="page">

Подія буде ініційована, коли батьківська сторінка View as Tab стане видимою
page:tabhide
Елемент сторінки

<div class="page">

Подія буде ініційована, коли батьківська сторінка View as Tab стане прихованою
Давайте подивимося, як ми можемо використовувати ці події. Є два способи додати обробники подій сторінки:
// Варіант 1. Використання одного обробника 'page:init' для всіх сторінок
$$(document).on('page:init', function (e) {
  // Зробити щось тут, коли сторінка завантажиться та ініціалізується

})

// Варіант 2. Використання живих обробників подій 'page:init' для кожної сторінки
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Зробити щось тут, коли сторінка з атрибутом data-name="about" завантажується та ініціалізується

})

Класи послідовності завантаження сторінки

Коли нова сторінка завантажується та переходить у вікно перегляду (основна видима частина програми), вона має різні класи на елементі сторінки. Коли ми завантажуємо/відкриваємо нову сторінку, відбувається наступне:

1. На поточній активній сторінці є клас page-current .

2. Якщо сторінку ми завантажуємо не в DOM (наприклад, завантажуємо через Ajax, за допомогою шаблону чи з компонента), вона буде додана до DOM.

3. Сторінка, яку ми завантажуємо/відкриваємо, матиме додатковий клас page-next , встановлений на своєму елементі.

4. Елемент маршрутизатора (<div class="view">) матиме додатковий router-transition-forward клас, який виконує наступне:

○ page with page-next (нова сторінка)переміщується в подання у view

○ page with page-current (поточна сторінка)клас переміщується з перегляду view

5. Після завершення переходу нова сторінка, яку ми завантажили, матиме клас page-current

6. І сторінка, яка раніше була активною, матиме клас page-previous

Коли ми завантажуємо/відкриваємо попередню сторінку (повертаємося назад), відбувається наступне:

1. На поточній активній сторінці є клас page-current.

2. Якщо сторінка, до якої ми повертаємося, не в DOM (наприклад, завантажена через Ajax, за допомогою шаблону чи з компонента), вона буде додана до DOM.

3. Сторінка, до якої ми повертаємося, матиме додатковий клас page-previous , встановлений для свого елемента.

4. Елемент маршрутизатора ( <div class="view">) матиме додатковий клас router-transition-backward , який виконує наступне:

○ page with page-previous (сторінка, на яку ми повертаємось) клас переміщується у view

○ page with page-current (поточна сторінка) клас переміщується з перегляду

5. Після завершення переходу нова сторінка, до якої ми повернулися, матиме клас page-current

6. І сторінка, яка раніше була активною, матиме клас page-next . Якщо цю сторінку було додано до DOM динамічно, вона буде видалена з DOM.

Дані сторінки

Як бачите, це досить легко, але як визначити, яка сторінка завантажується, коли ми використовуємо лише один обробник? Для цього випадку ми маємо дані сторінки в деталях події:
// В подіях сторінки:
$$(document).on('page:init', function (e) {
  // Page Data містить всю необхідну інформація про  завантажені  та ініціалізовані сторінки  
  var page = e.detail;
Або у випадку, якщо обробник події було призначено за допомогою Dom64, як у прикладі вище, тоді він буде переданий у другому аргументі:
// В подіях сторінки:
$$(document).on('page:init', function (e, page) {
  console.log(page);
})
Тепер у прикладі вище ми маємо дані сторінки в змінній page . Це об’єкт із такими властивостями:
ВластивістьОписТип
page.app
Ініціалізований екземпляр застосунку
object
page.view
Переглянути екземпляр, який містить цю сторінку (якщо це представлення було ініціалізовано)
object
page.router
Примірник маршрутизатора, який містить цю сторінку (якщо це представлення було ініціалізовано). Такий же, як ‘page.view.router’
object
page.name
‘data-name’ Значення атрибута сторінки
string
page.el
Елемент сторінки
HTMLElement
page.$el
Екземпляр Dom64 з елементом Page
object
page.from
Позиція сторінки перед переходом або напрямок, звідки походить ця сторінка. Це буде, next якщо ви завантажите нову сторінку, previous- якщо ви повернетесь на цю сторінку, або current якщо ця сторінка замінить поточну активну.
string
page.to
Нова позиція сторінки або місце, куди ця сторінка переходить. Може бути таким же next, previous або current
string
page.position
Псевдонім для page.from
string
page.direction
Напрямок переходу сторінки (за наявності). Може бути forward або backward
string
page.route
Маршрут, пов’язаний із цією сторінкою, об’єкт із поточними даними маршруту, який використовувався для завантаження цієї сторінки. Має такі властивості

● url- URL маршруту

● path- шлях маршруту

● query- об'єкт із запитом маршруту. Якщо URL-адреса є, /page/?id=5&foo=bar вона міститиме наступний об’єкт{id: '5', foo: 'bar'}

● params- параметри маршруту. Якщо у нас є відповідний маршрут із /page/user/:userId/post/:postId/шляхом і URL-адресою сторінки, то /page/user/55/post/12/це буде наступний об’єкт{userId: '55', postId: '12'}

● name- назва маршруту

● hash- хеш URL-адреси маршруту

● route- об'єкт із відповідним маршрутом із доступних маршрутів

● context- контекст, який було передано маршруту

object
page.pageFrom
Дані сторінки, яка була активна до цієї нової сторінки.
object

Доступ до даних сторінки

Якщо ви не використовуєте події/зворотні виклики сторінки та потребуєте доступу до даних сторінки, це можливо через властивість t4Page її HTMLElement:
var $$ = Dom64;

var page = $$('.page[data-name="somepage"]')[0].t4Page;

// Зробити щось з даними сторінки

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-page-master-width: 320px;
  --t4-page-master-border-color: rgba(0, 0, 0, 0.1);
  --t4-page-master-border-width: 1px;
  --t4-page-swipeback-transition-duration: 300ms;
  --t4-page-parallax-transition-duration: 500ms;
  --t4-page-cover-transition-duration: 450ms;
  --t4-page-dive-transition-duration: 500ms;
  --t4-page-fade-transition-duration: 500ms;
  --t4-page-flip-transition-duration: 700ms;
  --t4-page-push-transition-duration: 500ms;
  /*
  --t4-page-content-extra-padding-top: 0px;
  --t4-page-content-extra-padding-bottom: 0px;
  */
  --t4-page-title-line-height: 1.2;
  --t4-page-title-text-color: inherit;
  --t4-page-title-padding-left: 16px;
  --t4-page-title-padding-right: 16px;
}
.ios {
  --t4-page-transition-duration: 400ms;
  --t4-page-title-font-size: 34px;
  --t4-page-title-font-weight: 700;
  --t4-page-title-letter-spacing: -0.03em;
  --t4-page-title-padding-vertical: 6px;
  --t4-page-bg-color: #efeff4;
}
.ios .dark,
.ios.dark {
  --t4-page-bg-color: #000;
}
.md {
  --t4-page-transition-duration: 400ms;
  --t4-page-title-font-size: 34px;
  --t4-page-title-font-weight: 500;
  --t4-page-title-letter-spacing: 0;
  --t4-page-title-padding-vertical: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-page-bg-color: var(--t4-md-surface);
}
.dark {
  --t4-page-master-border-color: rgba(255, 255, 255, 0.2);
}

Techno4 Framework