スポンサースポンサーになる

リストインデックス

リストインデックスを使用すると、リストビューの特定のセクションに、各セクションをスクロールすることなく、すぐにアクセスできます。

リストインデックスのレイアウト

単一のリストインデックスレイアウトは非常にシンプルです

<div class="page">
  <div class="navbar">...</div>

  <!-- List Index element, must be a direct child of page -->
  <div class="list-index"></div>

  <!-- Scrollable page content -->
  <div class="page-content">...</div>
</div>

リストインデックス アプリメソッド

リストインデックスを操作するための関連するアプリメソッドを見てみましょう

app.listIndex.create(パラメータ)- リストインデックスインスタンスを作成します

  • パラメータ - オブジェクト。リストインデックスパラメータを持つオブジェクト

メソッドは、作成されたリストインデックスのインスタンスを返します

app.listIndex.destroy(el)- リストインデックスインスタンスを破棄します

  • el - HTMLElement または 文字列 (CSSセレクター付き) または オブジェクト。破棄するリストインデックス要素またはリストインデックスインスタンス。

app.listIndex.get(el)- HTML要素からリストインデックスインスタンスを取得します

  • el - HTMLElement または 文字列 (CSSセレクター付き)。リストインデックス要素。

メソッドは、リストインデックスのインスタンスを返します

リストインデックスパラメータ

リストインデックスを作成するために必要な利用可能なパラメータのリストを見てみましょう

パラメータタイプデフォルト説明
elHTMLElement
文字列		リストインデックス要素。 HTMLElementまたはリストインデックス要素のCSSセレクターを持つ文字列
listElHTMLElement
文字列		関連するリストビュー要素。 HTMLElementまたはリストビュー要素のCSSセレクターを持つ文字列
indexes配列
文字列		自動インデックス付きの配列。 渡されない場合、`listEl`パラメータで渡されたリストビュー要素内の`list-group-title`要素に基づいて自動的に生成されます
scrollListブール値true関連するリストビューを自動的に選択したインデックスにスクロールします
labelブール値falseリストインデックスをスワイプすると、選択したインデックスのラベルバブルが有効になります
iosItemHeight数値14単一インデックスアイテムの高さ。 動的インデックスと画面に収まるインデックスの数を計算するために必要です。 iOSテーマの場合
mdItemHeight数値14単一インデックスアイテムの高さ。 動的インデックスと画面に収まるインデックスの数を計算するために必要です。 MDテーマの場合
onオブジェクト

イベントハンドラを持つオブジェクト。 例えば

var listIndex = app.listIndex.create({
  el: '.list-index',
  on: {
    select: function () {
      console.log('Index selected')
    },
  },
})

リストインデックスのメソッドとプロパティ

リストインデックスを作成するには、次のように呼び出す必要があります

var listIndex = app.listIndex.create({ /* parameters */ })

その後、便利なメソッドとプロパティを備えた初期化されたインスタンス（上記の例の`listIndex`変数など）が得られます

プロパティ
listIndex.appグローバルアプリインスタンスへのリンク
listIndex.elリストインデックスHTML要素
listIndex.$elリストインデックスHTML要素を持つDom7インスタンス
listIndex.ul動的に作成された内部`<ul>` HTML要素
listIndex.$ul動的に作成された内部`<ul>` HTML要素を持つDom7インスタンス
listIndex.listEl`listEl`パラメータで渡された関連リストHTML要素
listIndex.$listEl`listEl`パラメータで渡された関連リストHTML要素を持つDom7インスタンス
listIndex.indexes計算されたインデックスの配列
listIndex.paramsリストインデックスパラメータ
メソッド
listIndex.update()インデックス、サイズを再計算し、リストインデックスを再レンダリングします
listIndex.scrollListToIndex(itemContent)関連リストを指定されたインデックスコンテンツにスクロールします
listIndex.destroy()リストインデックスインスタンスを破棄します
listIndex.on(イベント, ハンドラ)イベントハンドラを追加します
listIndex.once(イベント, ハンドラ)起動後に削除されるイベントハンドラを追加します
listIndex.off(イベント, ハンドラ)イベントハンドラを削除します
listIndex.off(イベント)指定されたイベントのすべてのハンドラを削除します
listIndex.emit(イベント, ...args)インスタンスでイベントを発生させます

リストインデックスイベント

リストインデックスは、リストインデックス要素で次のDOMイベントを発生させ、アプリとリストインデックスインスタンスでイベントを発生させます

DOMイベント

イベントターゲット説明
listindex:selectリストインデックス要素<div class="list-index">イベントは、クリックまたはスワイプではなく、インデックスの選択時にトリガーされます
listindex:clickリストインデックス要素<div class="list-index">イベントは、インデックスのクリック時にトリガーされます
listindex:beforedestroyリストインデックス要素<div class="list-index">リストインデックスインスタンスが破棄される直前にイベントがトリガーされます

アプリとリストインデックスインスタンスイベント

リストインデックスインスタンスは、セルフインスタンスとアプリインスタンスの両方でイベントを発行します。 アプリインスタンスイベントの名前は、`listIndex`というプレフィックスが付いています.

イベント引数ターゲット説明
select(listIndex, itemContent)listIndexイベントは、クリックまたはスワイプではなく、インデックスの選択時にトリガーされます。 引数として、イベントハンドラはリストインデックスインスタンスと選択されたインデックスアイテムコンテンツを受け取ります
listIndexSelect(listIndex, itemContent)アプリ
click(listIndex, itemContent)listIndexイベントは、インデックスのクリック時にトリガーされます。 引数として、イベントハンドラはリストインデックスインスタンスとクリックされたインデックスアイテムコンテンツを受け取ります
listIndexClick(listIndex, itemContent)アプリ
beforeDestroy(listIndex)listIndexリストインデックスインスタンスが破棄される直前にイベントがトリガーされます。 引数として、イベントハンドラはリストインデックスインスタンスを受け取ります
listIndexBeforeDestroy(listIndex)アプリ

リストインデックスの自動初期化

リストインデックスAPIを使用する必要がなく、リストインデックスがページ内にあり、ページの初期化時にDOMに存在する場合、`list-index-init`クラスを追加するだけで自動的に初期化できます

<!-- Add list-index-init class -->
<div class="list-index list-index-init"></div>

この場合、作成されたリストインデックスインスタンスにアクセスする必要がある場合は、`app.listIndex.get`アプリメソッドを使用できます

var listIndex = app.listIndex.get('.list-index');

var indexes = listIndex.indexes;
// do something with indexes

自動初期化を使用する場合、追加のパラメータを渡す必要がある場合があります。 リストインデックス要素の`data-`属性を介して、すべての利用可能なパラメータを設定できます

<div class="page">
  ...

  <!-- parameters set via data- attributes -->
  <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 {
  --f7-list-index-width: 16px;
  --f7-list-index-font-size: 11px;
  --f7-list-index-font-weight: 600;
  /* --f7-list-index-text-color: var(--f7-theme-color); */
  --f7-list-index-item-height: 14px;
  --f7-list-index-label-font-weight: 500;
}
.ios {
  --f7-list-index-label-text-color: #fff;
  /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  --f7-list-index-label-size: 44px;
  --f7-list-index-label-font-size: 17px;
  --f7-list-index-skip-dot-size: 6px;
}
.md {
  --f7-list-index-label-size: 56px;
  --f7-list-index-label-font-size: 20px;
  --f7-list-index-skip-dot-size: 4px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-list-index-label-bg-color: var(--f7-md-primary);
  --f7-list-index-label-text-color: var(--f7-md-on-primary);
}

例

list-index.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">List Index</div>
      </div>
    </div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list contacts-list list-strong-ios list-dividers-ios">
        <div class="list-group">
          <ul>
            <li class="list-group-title">A</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Aaron</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Adam</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Aiden</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Albert</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Alex</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Alexander</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Alfie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Archie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Arthur</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Austin</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">B</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Benjamin</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Blake</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Bobby</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">C</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Caleb</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Callum</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Cameron</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Charles</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Charlie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Connor</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">D</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Daniel</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">David</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Dexter</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Dylan</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">E</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Edward</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Elijah</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Elliot</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Elliott</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Ethan</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Evan</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">F</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Felix</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Finlay</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Finley</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Frankie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Freddie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Frederick</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">G</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Gabriel</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">George</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">H</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Harley</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Harrison</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Harry</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Harvey</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Henry</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Hugo</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">I</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Ibrahim</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Isaac</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">J</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jack</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jacob</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jake</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">James</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jamie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jayden</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jenson</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Joseph</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Joshua</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jude</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">K</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Kai</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Kian</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">L</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Leo</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Leon</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Lewis</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Liam</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Logan</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Louie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Louis</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Luca</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Lucas</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Luke</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">M</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Mason</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Matthew</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Max</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Michael</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Mohammad</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Mohammed</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Muhammad</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">N</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Nathan</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Noah</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">O</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Oliver</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Ollie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Oscar</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Owen</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">R</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Reuben</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Riley</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Robert</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Ronnie</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Rory</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Ryan</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">S</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Samuel</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Sebastian</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Seth</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Sonny</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Stanley</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">T</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Teddy</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Theo</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Theodore</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Thomas</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Toby</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Tommy</div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Tyler</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">W</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">William</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">Z</li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Zachary</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $onMounted, $onBeforeUnmount }) => {
    let listIndex;

    $onMounted(() => {
      // Create list index instance
      listIndex = $f7.listIndex.create({
        // List el where to look indexes and scroll for
        listEl: $el.value.find('.list'),
        // ".list-index" element
        el: $el.value.find('.list-index'),
        // Generate indexes automatically based on ".list-group-title"
        indexes: 'auto',
        // Scroll list on indexes click and touchmove
        scrollList: true,
        // Enable bubble label when swiping over indexes
        label: true,
      });
    })
    $onBeforeUnmount(() => {
      if (listIndex) {
        listIndex.destroy();
      }
    })

    return $render;
  }
</script>
このドキュメントを改善する
このページについて