贊助者成為贊助者

列表索引

清單索引可立即存取清單檢視的特定區段，而無需捲動瀏覽每個區段。

清單索引配置

單一清單索引配置相當簡單

<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(parameters)- 建立清單索引實例

  • parameters - object。包含清單索引參數的物件

方法傳回已建立的清單索引實例

app.listIndex.destroy(el)- 銷毀清單索引實例

  • el - HTMLElement 或 string（包含 CSS 選擇器）或 object。要銷毀的清單索引元素或清單索引實例。

app.listIndex.get(el)- 透過 HTML 元素取得清單索引實例

  • el - HTMLElement 或 string（包含 CSS 選擇器）。清單索引元素。

方法傳回清單索引實例

清單索引參數

現在讓我們來看看建立清單索引所需的可用參數清單

參數類型預設值說明
elHTMLElement
string		清單索引元素。HTMLElement 或包含清單索引元素 CSS 選擇器的字串
listElHTMLElement
string		相關的清單檢視元素。HTMLElement 或包含清單檢視元素 CSS 選擇器的字串
indexes陣列
string		auto包含索引的陣列。如果未傳遞，則會根據 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相關的清單 HTML 元素，傳遞至 listEl 參數
listIndex.$listEl包含相關清單 HTML 元素的 Dom7 實例，傳遞至 listEl 參數
listIndex.indexes包含計算索引的陣列
listIndex.params清單索引參數
方法
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 事件

事件目標說明
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)app
click(listIndex, itemContent)listIndex事件將在索引點擊時觸發。事件處理常式會收到清單索引實例和點擊的索引項目內容作為引數
listIndexClick(listIndex, itemContent)app
beforeDestroy(listIndex)listIndex事件將在 List Index 執行個體即將被銷毀前觸發。事件處理常式會接收 list index 執行個體作為參數
listIndexBeforeDestroy(listIndex)app

List Index 自動初始化

如果你不需要使用 List Index API，而且你的 List Index 在頁面內部，並在頁面初始化時出現在 DOM 中，那麼只要新增一個 `list-index-init` 類別，就可以自動初始化它

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

在這種情況下，如果你需要存取已建立的 List Index 執行個體，你可以使用 `app.listIndex.get` 應用程式方法

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

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

在使用自動初始化時，你可能需要傳遞額外的參數。你可以透過 list index 元素上的 `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>
改善此文件
在此頁面上