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
  • 作用:项渲染函数
  • 是否必传:否