indexList

功能描述

indexList是基于原生js的索引列表组件，仅4kb，支持定制

依赖插件

无

快速使用

<div class="indexlist">
    <ul class="indexlist-content">
    </ul>
    <div class="indexlist-nav">
        <ul class="indexlist-navlist">
        </ul>
    </div>
    <div class="indexlist-indicator" style="display: none;" id="indicator"></div>
</div>

new IndexList({
    el: document.querySelector('.indexlist'),
    data: D.data,
    indexRender: function (index) {
        return '<p class="indexsection-index">' + index + '</p>';
    },
    itemRender: function (index, item) {
        return '<a class="cell"><div class="cell-wrapper"><div class="cell-title"><span class="cell-text">' + item + '</span></div></div></a>'
    }
})

配置项

el

  • 类型：HTMLElement
  • 默认值：null
  • 作用：内容区
  • 是否必传：是

data

  • 类型：Array
  • 默认值：null
  • 作用：索引列表数据
  • 是否必传：是
  • 参考：
[
    {
        index: 'A',
        items: ['Aaron', 'Alden', 'Austin']
    },
    {
        index: 'B',
        items: ['Baldwin', 'Braden']
    }
]

indexRender

  • 类型：Function
  • 作用：索引渲染函数
  • 是否必传：否

itemRender

  • 类型：Function
  • 作用：项渲染函数
  • 是否必传：否
是否仍需要帮助？ 请保持联络！
最后更新于 2025/09/15