Indexes 索引

索引列表：数据驱动 + 分组锚点，右侧字母点击 / 拖动可跳转定位并滚动高亮联动。吸顶由原生 sticky-header 提供（App / H5），微信小程序 WebView 暂不吸顶。点击组件类型或打开按钮，以全屏弹层体验真实交互。

索引列表，右侧字母索引条 + 分组标题吸顶。

演示

9:41

代码示例

<!-- 演示预览 -->
  <re-popup :visible="previewVisible" placement="right" :closeBtn="true" :safeAreaInsetBottom="false" :customStyle="popupStyle" @update:visible="onPreviewVisibleChange" >
  <re-indexes :key="currentDemo.key + '-' + previewVisible.toString()" class="demo-active" :list="currentDemo.list" :defaultCurrent="currentDemo.defaultCurrent" :indexList="currentDemo.indexList" :showFullIndex="currentDemo.showFullIndex" :sticky="currentDemo.sticky" :stickyOffset="currentDemo.stickyOffset" scrollMode="container" :customStyle="resolvePopupIndexesStyle()" @change="onPreviewChange" @select="onPreviewSelect" >
  <re-indexes-anchor v-if="currentDemo.customAnchor" :index="index" :active="active" :sticky="sticky" :register="false" class="demo-anchor-wrapper" >
  <re-indexes-anchor v-else :index="index" :active="active" :sticky="sticky" :register="false" class="demo-anchor-wrapper" />
  <re-cell-group class="demo-cell-group" :bordered="false">
  <re-cell v-for="(city, cityIndex) in group.items" :key="cityIndex" :title="city" :bordered="cityIndex != group.items.length - 1" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-indexes />。

API

Indexes Props

名称类型默认值描述必传
listany[] as any-N
currentIndexSourceValue''-N
defaultCurrentIndexSourceValue''-N
indexListIndexSourceValue[] as IndexSourceValue-N
showFullIndexbooleanfalse-N
stickybooleantrue-N
stickyOffsetnumber0-N
scrollModeScrollMode'page' as ScrollMode-N
customStylestring''自定义样式N

Indexes Events

名称参数描述
selectindex: string选择时触发
changeindex: string值变化时触发
item-clickdetail: UTSJSONObject-

Indexes Slots

名称描述
anchor-
group-
default默认插槽

IndexesAnchor Props

名称类型默认值描述必传
indexstring''-N
activebooleanfalse-N
stickybooleanfalse-N
registerbooleantrue-N
customStylestring''自定义样式N

IndexesAnchor Slots

名称描述
default默认插槽
FixedNav 悬浮导航
参考 NutUI fixednav 示例，支持右侧、左侧、无遮罩与自定义按钮/列表。
Navbar 导航条
自定义导航条组件，支持标题、左右文字/图标，可固定在顶部