Skip to main content

Індекс списку

Навігація

Індекс списку

Індекс списку дозволяє миттєво отримати доступ до певного розділу перегляду списку без прокручування кожного розділу.

Макет індексу списку

Макет індексу єдиного списку досить простий:
<div class="page">
  <div class="navbar">...</div>

  <!--Елемент List Index має бути прямим дочірнім елементом сторінки -->
  <div class="list-index"></div>

  <!-- Прокручуваний вміст сторінки-->
  <div class="page-content">...</div>
</div>

Перелік методів застосунку Індекс списку

Давайте розглянемо пов’язані методи роботи програми з індексом списку:
app.listIndex.create(parameters)- створити екземпляр List Index

— parameters - object. - Об'єкт зі списком параметрів індексу

Метод повертає створений екземпляр List Index

app.listIndex.destroy(el)- знищити екземпляр List Index

— el - HTMLElement or string (with CSS Selector) or object. - Елемент List Index або екземпляр List Index для знищення.

app.listIndex.get(el)- отримати екземпляр List Index за елементом HTML.

— el - HTMLElement or string (with CSS Selector). - Елемент індексу списку.

Метод повертає екземпляр List Index

Список параметрів індексу

Тепер давайте подивимося на список доступних параметрів, необхідних для створення списку індексу:
ПараметрЗа замовчуваннямОписТип
el
Елемент індексу списку. HTMLElement або рядок із CSS-селектором елемента індексу списку
string
listEl
Пов’язаний елемент перегляду списку. HTMLElement або рядок із CSS-селектором елемента List View
string
indexes
auto
Масив з індексами. Якщо не передано, він автоматично згенерує його на основі елементів item-divider і list-group-title всередині переданого елементаList View у параметрі listEl
string
scrollList
true
Автоматично прокрутить пов’язаний список до вибраного покажчика
boolean
label
false
Вмикає спливаючу підказку з вибраним індексом, коли ви проводите пальцем по індексу списку
boolean
iosItemHeight
14
Висота одного елемента індексу. Необхідно розрахувати динамічний індекс і кількість індексів, які поміщаються на екрані. Для теми iOS
number
mdItemHeight
14
Висота одного елемента індексу. Необхідно розрахувати динамічний індекс і кількість індексів, які поміщаються на екрані. Для теми MD
number
auroraItemHeight
14
Висота одного елемента індексу. Необхідно розрахувати динамічний індекс і кількість індексів, які поміщаються на екрані. Для теми «Аврора».
number
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var listIndex = app.listIndex.create({
  el: '.list-index',
  on: {
    select: function () {
      console.log('Index selected')
    },
  },
})

Перелік методів і властивостей індексу

Отже, щоб створити індекс списку, ми повинні викликати:
var listIndex = app.listIndex.create({ /* parameters */ })
Після цього у нас є його ініціалізований екземпляр (наприклад, змінна listIndex у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість ОписТип
listIndex.app
Посилання на глобальний екземпляр застосунку
object
listIndex.el
Елемент HTML індексу списку
HTMLElement
listIndex.$el
Примірник Dom64 з елементом HTML індексу списку
HTMLElement
listIndex.ul
Динамічно створений внутрішній елемент HTML <ul>
object
listIndex.$ul
Екземпляр Dom64 із динамічно створеним внутрішнім елементом HTML <ul>
object
listIndex.listEl
HTML-елемент пов’язаного списку, переданий у параметрі listEl
HTMLElement
listIndex.$listEl
Примірник Dom64 із пов’язаним HTML-елементом List, переданим у параметрі listEl
HTMLElement
listIndex.indexes
Масив з обчисленими індексами
object
listIndex.params
Список параметрів індексу
object
Методи
МетодОписТип
listIndex.update()
Перераховує індекси, розміри та повторно відображає індекс списку
object
listIndex.scrollListToIndex(itemContent)
Прокручує пов’язаний список до вказаного вмісту покажчика
object
listIndex.destroy()
Знищує екземпляр індексу списку
function
listIndex.on(event, handler)
Додати обробник подій
Event
listIndex.once(event, handler)
Додати обробник подій, який буде видалено після запуску
Event
listIndex.off(event, handler)
Видалити обробник подій
Event
listIndex.off(event)
Видалити всі обробники для вказаної події
Event
listIndex.emit(event, ...args)
Запустити подію на примірнику індексу
Event

Список подій індексу

Індекс списку запускатиме такі події DOM в елементі індексу списку та події в екземплярі застосунку та індексу списку:

Події DOM

ПодіяОб'єктОписТип
listindex:select
Елемент індексу списку

<div class="list-index">

Подія буде ініційована під час вибору індексу, а не клацанням або гортанням
string
listindex:click
Елемент індексу списку

<div class="list-index">

Подія буде ініційована після клацання індексу
string
listindex:beforedestroy
Елемент індексу списку

<div class="list-index">

Подія буде ініційована безпосередньо перед тим, як екземпляр List Index буде знищено
string

Події екземплярів застосунку та індексу списку

Екземпляр List Index генерує події як для власного екземпляра, так і для екземпляра застосунку. Події екземплярів за стосунку мають однакові назви з префіксом listIndex.
ПодіяАргументОписТип
select
(listIndex, itemContent)
Подія буде ініційована під час вибору індексу, а не клацанням або гортанням. Як аргумент обробник події отримує екземпляр індексу списку та вміст вибраного елемента індексу
null
listIndexSelect
(listIndex, itemContent)
Подія буде ініційована під час вибору індексу, а не клацанням або гортанням. Як аргумент обробник події отримує екземпляр індексу списку та вміст вибраного елемента індексу
null
click
(listIndex, itemContent)
Подія буде ініційована після клацання індексу. Як аргумент обробник події отримує екземпляр індексу списку та вміст елемента індексу на який клацнули
null
listIndexClick
(listIndex, itemContent)
Подія буде ініційована після клацання індексу. Як аргумент обробник події отримує екземпляр індексу списку та вміст елемента індексу на який клацнули
null
beforeDestroy
(listIndex)
Подія буде ініційована безпосередньо перед тим, як екземпляр List Index буде знищено. Як аргумент обробник події отримує екземпляр індексу списку
null
listIndexBeforeDestroy
(listIndex)
Подія буде ініційована безпосередньо перед тим, як екземпляр List Index буде знищено. Як аргумент обробник події отримує екземпляр індексу списку
null

Автоматична ініціалізація індексу списку

Якщо вам не потрібно використовувати API індексу списку, а ваш індекс списку знаходиться всередині сторінки та представлений у DOM у момент ініціалізації сторінки, тоді його можна автоматично ініціалізувати, просто додавши додатковий клас list-index-init:
<!-- Додайте клас ініціалізації списку-індексу -->
<div class="list-index list-index-init"></div>
У цьому випадку, якщо вам потрібно отримати доступ до створеного екземпляра List Index, ви можете скористатися методом програми app.listIndex.get:
var listIndex = app.listIndex.get('.list-index');

var indexes = listIndex.indexes;
// зробити щось з індексами
Під час використання автоматичної ініціалізації може знадобитися передати додаткові параметри. ви можете встановити всі доступні параметри за допомогою атрибутів даних (data-)в елементі індексу списку:
<div class="page">
  ...

  <!-- параметри, задані за допомогою атрибутів даних -->
  <div class="list-index"
    data-list-el=".contacts-list"
    data-label="true"
    data-indexes="auto"
  ></div>

  <div class="page-content">
    <div class="list contacts-list">
      ...
    </div>
  </div>
</div>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-list-index-width: 16px;
  --t4-list-index-font-size: 11px;
  --t4-list-index-font-weight: 600;
  /* --t4-list-index-text-color: var(--t4-theme-color); */
  --t4-list-index-item-height: 14px;
  --t4-list-index-label-text-color: #fff;
  /* --t4-list-index-label-bg-color: var(--t4-theme-color); */
  --t4-list-index-label-font-weight: 500;
}
.ios {
  --t4-list-index-label-size: 44px;
  --t4-list-index-label-font-size: 17px;
  --t4-list-index-skip-dot-size: 6px;
}
.md {
  --t4-list-index-label-size: 56px;
  --t4-list-index-label-font-size: 20px;
  --t4-list-index-skip-dot-size: 4px;
}
.aurora {
  --t4-list-index-font-size: 12px;
  --t4-list-index-label-size: 32px;
  --t4-list-index-label-font-size: 12px;
  --t4-list-index-label-font-weight: 600;
  --t4-list-index-skip-dot-size: 4px;
}

Приклади: 

<template>
  <div class="page navbar-fixed" data-page="home">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">List Index</div>
      </div>
    </div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list simple-list contacts-list indexed-list-init">
        <div class="list-group">
          <ul>
            <li class="list-group-title">A</li>
            <li>Aaron</li>
            <li>Adam</li>
            <li>Aiden</li>
            <li>Albert</li>
            <li>Alex</li>
            <li>Alexander</li>
            <li>Alfie</li>
            <li>Archie</li>
            <li>Arthur</li>
            <li>Austin</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">B</li>
            <li>Benjamin</li>
            <li>Blake</li>
            <li>Bobby</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">C</li>
            <li>Caleb</li>
            <li>Callum</li>
            <li>Cameron</li>
            <li>Charles</li>
            <li>Charlie</li>
            <li>Connor</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">D</li>
            <li>Daniel</li>
            <li>David</li>
            <li>Dexter</li>
            <li>Dylan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">E</li>
            <li>Edward</li>
            <li>Elijah</li>
            <li>Elliot</li>
            <li>Elliott</li>
            <li>Ethan</li>
            <li>Evan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">F</li>
            <li>Felix</li>
            <li>Finlay</li>
            <li>Finley</li>
            <li>Frankie</li>
            <li>Freddie</li>
            <li>Frederick</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">G</li>
            <li>Gabriel</li>
            <li>George</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">H</li>
            <li>Harley</li>
            <li>Harrison</li>
            <li>Harry</li>
            <li>Harvey</li>
            <li>Henry</li>
            <li>Hugo</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">I</li>
            <li>Ibrahim</li>
            <li>Isaac</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">J</li>
            <li>Jack</li>
            <li>Jacob</li>
            <li>Jake</li>
            <li>James</li>
            <li>Jamie</li>
            <li>Jayden</li>
            <li>Jenson</li>
            <li>Joseph</li>
            <li>Joshua</li>
            <li>Jude</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">K</li>
            <li>Kai</li>
            <li>Kian</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">L</li>
            <li>Leo</li>
            <li>Leon</li>
            <li>Lewis</li>
            <li>Liam</li>
            <li>Logan</li>
            <li>Louie</li>
            <li>Louis</li>
            <li>Luca</li>
            <li>Lucas</li>
            <li>Luke</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">M</li>
            <li>Mason</li>
            <li>Matthew</li>
            <li>Max</li>
            <li>Michael</li>
            <li>Mohammad</li>
            <li>Mohammed</li>
            <li>Muhammad</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">N</li>
            <li>Nathan</li>
            <li>Noah</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">O</li>
            <li>Oliver</li>
            <li>Ollie</li>
            <li>Oscar</li>
            <li>Owen</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">R</li>
            <li>Reuben</li>
            <li>Riley</li>
            <li>Robert</li>
            <li>Ronnie</li>
            <li>Rory</li>
            <li>Ryan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">S</li>
            <li>Samuel</li>
            <li>Sebastian</li>
            <li>Seth</li>
            <li>Sonny</li>
            <li>Stanley</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">T</li>
            <li>Teddy</li>
            <li>Theo</li>
            <li>Theodore</li>
            <li>Thomas</li>
            <li>Toby</li>
            <li>Tommy</li>
            <li>Tyler</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">W</li>
            <li>William</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">Z</li>
            <li>Zachary</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $on }) => {
    $on('pageInit', () => {
      var listIndex = $t4.listIndex.create({
        // ".list-index" element
        el: '.list-index',
        // List el where to look indexes and scroll for
        listEl: '.contacts-list',
        // Generate indexes automatically based on ".list-group-title" and ".item-divider"
        indexes: 'auto',
        // Scroll list on indexes click and touchmove
        scrollList: true,
        // Enable bubble label when swiping over indexes
        label: true,
      });
    })