列表索引
列表索引允许快速访问列表视图的特定部分，而无需滚动浏览每个部分。
列表索引布局
单个列表索引布局非常简单
<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 方法
app.listIndex.create(参数)- 创建列表索引实例
- 参数 - object. 有列表索引参数的对象
方法返回已创建的列表索引实例
app.listIndex.destroy(el)- 销毁列表索引实例
- el - HTMLElement 或 string（带 CSS 选择器）或 object. 要销毁的列表索引元素或列表索引实例。
app.listIndex.get(el)- 根据 HTML 元素获取列表索引实例
- el - HTMLElement 或 string (带 CSS 选择器). 列表索引元素。
方法返回列表索引实例
列表索引参数
让我们了解创建列表索引所需可用参数的列表
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| el | HTMLElement string | 列表索引元素。带列表索引元素 CSS 选择器的 HTMLElement 或字符串 | |
| listEl | HTMLElement string | 相关列表视图元素。带列表视图元素 CSS 选择器的 HTMLElement 或字符串 | |
| indexes | array string | auto | 带索引的数组。如果未传递，则将根据 listEl 参数中传递的列表视图元素内的 list-group-title 元素自动生成索引 |
| scrollList | boolean | true | 将自动将相关的列表视图滚动到选定的索引 |
| label | boolean | false | 当在列表索引上滑动时启用带选定索引的标签气泡 |
| iosItemHeight | number | 14 | 单个索引项高度。需要用于计算动态索引以及屏幕上可以容纳多少个索引。适用于 iOS 主题 |
| mdItemHeight | number | 14 | 单个索引项高度。需要用于计算动态索引以及屏幕上可以容纳多少个索引。适用于 MD 主题 |
| on | object | 带事件处理程序的对象。例如 |
列表索引方法和属性
因此，要创建列表索引，我们必须调用
var listIndex = app.listIndex.create({ /* parameters */ })在调用后，我们有其已初始化的实例（如上例中的 listIndex 变量），并带有有用的方法和属性
| 属性 | |
|---|---|
| listIndex.app | 指向全局 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(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。
| 事件 | 参数 | 目标 | 描述 |
|---|---|---|---|
| 选择 | (listIndex, itemContent) | listIndex | 无论是单机还是轻扫，事件都会在索引选择时触发。作为参数，事件处理程序接收列表索引实例和选定的索引项内容 |
| listIndexSelect | (listIndex, itemContent) | app | |
| 单击 | (listIndex, itemContent) | listIndex | 事件在索引单击时触发。作为参数，事件处理程序接收列表索引实例和单击的索引项内容 |
| listIndexClick | (listIndex, itemContent) | app | |
| beforeDestroy | (listIndex) | listIndex | 事件在销毁列表索引实例之前触发。作为参数，事件处理程序接收列表索引实例 |
| listIndexBeforeDestroy | (listIndex) | app |
列表索引自动初始化
如果你不需要使用列表索引 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>