- 开始使用
- 事件
- 路由 / 导航
- 存储
- 组件
- Framework7图标
- 样式
- Dom7
- 触摸实用工具
- 实用工具
- 插件 API
- 懒加载模块
- 自定义构建
列表索引
列表索引允许您立即访问列表视图的特定部分，而无需滚动每个部分。
列表索引布局
单个列表索引布局相当简单：
<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 选择器)。列表索引元素。
方法返回列表索引的实例
列表索引参数
现在让我们看看创建列表索引所需的可用参数列表：
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
| el | HTMLElement 字符串 | 列表索引元素。HTMLElement 或列表索引元素的 CSS 选择器字符串 | |
| listEl | HTMLElement 字符串 | 相关列表视图元素。HTMLElement 或包含列表视图元素的 CSS 选择器的字符串 | |
| indexes | 数组 字符串 | 自动 | 索引数组。如果没有传递，则将根据参数中传递的列表视图元素内的元素自动生成list-group-titleelements inside of passed List View element inlistElparameter |
| scrollList | 布尔值 | true | 将自动滚动相关列表视图到选定的索引 |
| label | 布尔值 | false | 当您在列表索引上滑动时，启用带有选定索引的标签气泡 |
| iosItemHeight | 数字 | 14 | 单个索引项高度。它用于计算动态索引和屏幕上可以容纳多少个索引。对于 iOS 主题 |
| mdItemHeight | 数字 | 14 | 单个索引项高度。它用于计算动态索引和屏幕上可以容纳多少个索引。对于 MD 主题 |
| on | 对象 | 带有事件处理程序的对象。例如： |
列表索引方法 & 属性
因此要创建列表索引，我们必须调用：
var listIndex = app.listIndex.create({ /* parameters */ })之后我们就有其初始化的实例（如listIndex示例中上面的变量）以及有用的方法和属性：
| 属性 | |
|---|---|
| listIndex.app | 链接到全局应用实例 |
| listIndex.el | 列表索引 HTML 元素 |
| listIndex.$el | 带有列表索引 HTML 元素的 Dom7 实例 |
| listIndex.ul | 动态创建的内部<ul>HTML 元素的 Dom7 实例 |
| listIndex.$ul | 带有动态创建的内部<ul>HTML 元素的 Dom7 实例 |
| listIndex.listEl | 相关的列表 HTML 元素，传递在listElparameter |
| listIndex.$listEl | 带有传递的列表 HTML 元素的 Dom7 实例listElparameter |
| listIndex.indexes | 计算索引的数组 |
| listIndex.params | 列表索引参数 |
| 方法 | |
| listIndex.update() | 重新计算索引、大小并重新渲染列表索引 |
| listIndex.scrollListToIndex(itemContent) | 滚动相关列表到指定索引内容 |
| listIndex.destroy() | 销毁列表索引实例 |
| listIndex.on(事件上触发, 处理程序) | 添加事件处理程序 |
| listIndex.once(事件上触发, 处理程序) | 添加在触发后将被移除的事件处理程序 |
| listIndex.off(事件上触发, 处理程序) | 移除事件处理程序 |
| listIndex.off(事件上触发) | 移除指定事件的所有处理程序 |
| listIndex.emit(事件上触发, ...args) | 在实例上触发事件 |
列表索引事件
列表索引将在列表索引元素上以及应用和列表索引实例上触发以下 DOM 事件：
DOM 事件
| 事件 | Target | 描述 |
|---|---|---|
| listindex:select | List Index Element<div class="list-index"> | Event will be triggered on index select rather by click or swiping |
| listindex:click | List Index Element<div class="list-index"> | Event will be triggered on index click |
| listindex:beforedestroy | List Index Element<div class="list-index"> | Event will be triggered right before List Index instance will be destroyed |
应用和列表索引实例事件
List Index instance emits events on both self instance and app instance. App instance events has same names prefixed with listIndex.
| 事件 | 参数 | Target | 描述 |
|---|---|---|---|
| select | (listIndex, itemContent) | listIndex | Event will be triggered on index select rather by click or swiping. As an argument event handler receives list index instance and selected index item content |
| listIndexSelect | (listIndex, itemContent) | app | |
| click | (listIndex, itemContent) | listIndex | Event will be triggered on index click. As an argument event handler receives list index instance and clicked index item content |
| listIndexClick | (listIndex, itemContent) | app | |
| beforeDestroy | (listIndex) | listIndex | Event will be triggered right before List Index instance will be destroyed. As an argument event handler receives list index instance |
| listIndexBeforeDestroy | (listIndex) | app |
列表索引自动初始化
If you don't need to use List Index API and your List Index is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional list-index-init class:
<!-- Add list-index-init class -->
<div class="list-index list-index-init"></div>
In this case if you need to access created List Index instance you can use the app.listIndex.get app method:
var listIndex = app.listIndex.get('.list-index');
var indexes = listIndex.indexes;
// do something with indexesWhen using auto init you may need to pass additional parameters. you can set all available parameters via data- attributes on list index element:
<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>