v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

リストインデックス

    リストインデックスは、リストビューの特定のセクションに、スクロールせずにすぐにアクセスできるようにするものです。

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

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

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

  <!-- List Index要素は、ページの直接の子でなければなりません。 -->
  <div class="list-index"></div>

  <!-- スクロール可能なページコンテンツ -->
  <div class="page-content">...</div>
</div>

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

    List Indexに関連するAppメソッドを見てみましょう。

    app.listIndex.create(parameters)- List Indexのインスタンス作成

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

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

    app.listIndex.destroy(el)- リストインデックスのインスタンスの破棄

    • el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。破壊するリスト・インデックス要素またはリスト・インデックス・インスタンス。

    app.listIndex.get(el)- HTML要素によるリストインデックスインスタンスの取得

    • el - HTMLElement または string (CSS Selectorを使用). List Indexの要素です。

    メソッドは、List Indexのインスタンスを返します。

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

    ここでは、リストインデックスを作成するために必要なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    elHTMLElement
    string    		リストインデックスの要素。HTML要素、またはリストインデックス要素のCSSセレクタを持つ文字列
    listElHTMLElement
    string    		関連リストビュー要素。リストビュー要素の CSS セレクタをもつ HTML 要素または文字列。
    indexesarray
    string    		autoインデックスを含む配列。渡されなかった場合は、listElパラメータで渡されたリストビュー要素の中のitem-dividerとlist-group-title要素に基づいて自動的に生成されます。
    scrollListbooleantrue選択されたインデックスまで、関連するリストビューを自動的にスクロールします。
    labelbooleanfalseリストのインデックス上をスワイプすると、選択したインデックスのラベルバブルが表示されます。
    iosItemHeightnumber14単一のインデックスアイテムの高さ。これは、ダイナミックインデックスと、画面に収まるインデックスの数を計算するために必要です。iOSテーマの場合
    mdItemHeightnumber14単一のインデックス項目の高さ。ダイナミックインデックスの計算と、画面に収まるインデックス数の計算に必要です。MDテーマの場合
    auroraItemHeightnumber14単一のインデックス項目の高さです。ダイナミックインデックスの計算と、画面に収まるインデックスの数が必要になります。Auroraテーマの場合
    onobject

    イベントハンドラーを持つオブジェクト。例えば、以下のようになります。

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

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

    リストインデックスを作成するためには、呼び出しが必要です。

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

    その後、初期化されたインスタンス（上記の例では listIndex という変数）に、便利なメソッドとプロパティが追加されます。

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

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

    リストインデックスでは、以下のDOMイベントがリストインデックス要素で、イベントがアプリとリストインデックスのインスタンスで発生します。

    DOMイベント

    EventTargetDescription
    listindex:selectList Index Element<div class="list-index">インデックスがクリックやスワイプで選択されたときにイベントが発生します。
    listindex:clickList Index Element<div class="list-index">インデックスのクリック時にイベントが発生します。
    listindex:beforedestroyList Index Element<div class="list-index">イベントは、リストインデックスインスタンスが破壊される直前に発生します。

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

    List Indexインスタンスは、selfインスタンスとappインスタンスの両方でイベントを発行します。アプリインスタンスのイベントは、同じ名前でプレフィックスとして listIndex が付きます。

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

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

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

    <!-- list-index-initクラスの追加 -->
<div class="list-index list-index-init"></div>

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

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

var indexes = listIndex.indexes;
// インデックスで何かをする

    auto initを使用する際には、追加のパラメータを渡す必要があるかもしれません。利用可能なパラメータはすべて、リストインデックス要素のdata-属性で設定できます。

    <div class="page">
  ...

  <!-- data-属性で設定するパラメータ -->
  <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 Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :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-text-color: #fff;
  /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  --f7-list-index-label-font-weight: 500;
}
.ios {
  --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;
}
.aurora {
  --f7-list-index-font-size: 12px;
  --f7-list-index-label-size: 32px;
  --f7-list-index-label-font-size: 12px;
  --f7-list-index-label-font-weight: 600;
  --f7-list-index-skip-dot-size: 4px;
}

    Examples

    <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, { $f7, $on }) => {
    $on('pageInit', () => {
      var listIndex = $f7.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,
      });
    })

    return $render;
  }
</script>