LimeIndexes 索引组件

一个功能丰富的索引组件，用于快速导航和定位内容。支持索引字符列表、吸顶效果、自定义颜色和主题等多种配置，可用于通讯录、城市选择等场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

安装方法

在uni-app 中搜索并导入lime-indexes
导入后可能需要重新编译项目
在页面中使用l-indexes组件

代码演示

基础用法

点击索引栏时，会自动跳转到对应的 IndexesAnchor 锚点位置。
由于uniapp x app使用的是list-view故，在uniapp x app上需要特殊处理。

html

<!-- 非uniapp x app -->
<l-indexes>
	<l-indexes-anchor index="A" />
	<view>文本</view>
	<view>文本</view>
	<view>文本</view>
	<l-indexes-anchor index="B" />
	<view>文本</view>
	<view>文本</view>
	<view>文本</view>
</l-indexes>

<!-- uniapp x app -->
<l-indexes>
	<sticky-section>
		<l-indexes-anchor index="A" />
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
	</sticky-section>
	<sticky-section>
		<l-indexes-anchor index="B" />
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
	</sticky-section>
</l-indexes>

自定义索引列表

可以通过 index-list 属性自定义展示的索引字符列表。

html

<!-- 非uniapp x app -->
<l-indexes :index-list="indexList">
	<l-indexes-anchor index="1">标题1</l-indexes-anchor>
	<view class="cell">文本</view>
	<view class="cell">文本</view>
	<view class="cell">文本</view>

	<l-indexes-anchor index="2">标题2</l-indexes-anchor>
	<view class="cell">文本</view>
	<view class="cell">文本</view>
	<view class="cell">文本</view>
</l-indexes>

<!-- uniapp x app -->
<l-indexes :index-list="indexList">
	<sticky-section>
		<l-indexes-anchor index="1">标题1</l-indexes-anchor>
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
	</sticky-section>
	<sticky-section>
		<l-indexes-anchor index="2">标题2</l-indexes-anchor>
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
		<list-item><text>文本</text></list-item>
	</sticky-section>
</l-indexes>

export default {
  setup() {
    return {
      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
};

ScrollView 容器

插件页面使用页面滚动。但在一些场景需要在局部使用，通过设置scroll-view配合高度可以局部

html

<l-indexes v-if="scrollView" :index-list="indexList" :showTips="true" scroll-view style="height:400px">
	<!-- #ifdef APP-ANDROID || APP-IOS -->
	<sticky-section v-for="item in list" :key="item.index">
		<l-indexes-anchor :index="item.index" />
		<list-item class="cell" v-for="(val, i) in item.children" :key="i">
			<text>{{val}}</text>
		</list-item>
	</sticky-section>
	<!-- #endif -->
	<!-- #ifndef APP-ANDROID || APP-IOS -->
	<template v-for="item in list" :key="item.index">
		<l-indexes-anchor :index="item.index" />
		<view class="cell" v-for="(val, i) in item.children" :key="i">
			<text>{{val}}</text>
		</view>
	</template>
	<!-- #endif -->
</l-indexes>

type ListItem = {
	index: string,
	children: string[]
}
const list:ListItem[] = [
  {
    index: 'A',
    children: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
  },
  {
    index: 'B',
    children: [
      '北京',
      '白银',
      '保定',
      '宝鸡',
      '保山',
      '包头',
      '巴中',
      '北海',
      '蚌埠',
      '本溪',
      '毕节',
      '滨州',
      '百色',
      '亳州',
    ],
  },
  {
    index: 'C',
    children: [
      '重庆',
      '成都',
      '长沙',
      '长春',
      '沧州',
      '常德',
      '昌都',
      '长治',
      '常州',
      '巢湖',
      '潮州',
      '承德',
      '郴州',
      '赤峰',
      '池州',
      '崇左',
      '楚雄',
      '滁州',
      '朝阳',
    ],
  },
  {
    index: 'D',
    children: [
      '大连',
      '东莞',
      '大理',
      '丹东',
      '大庆',
      '大同',
      '大兴安岭',
      '德宏',
      '德阳',
      '德州',
      '定西',
      '迪庆',
      '东营',
    ],
  },
  {
    index: 'E',
    children: ['鄂尔多斯', '恩施', '鄂州'],
  },
  {
    index: 'F',
    children: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
  },
  {
    index: 'G',
    children: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
  },
  {
    index: 'J',
    children: ['揭阳', '吉林', '晋江', '吉安', '胶州', '嘉兴', '济南', '鸡西', '荆州', '江门', '基隆'],
  },
  {
    index: 'K',
    children: ['昆明', '开封', '康定', '喀什'],
  },
];
const indexList = list.map((item: ListItem):string => item.index)

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

html

<!-- 代码位于 uni_modules/lime-indexes/components/l-indexes -->
<l-indexes />

插件标签说明

标签名	说明
`l-indexes`	组件标签
`l-indexes-anchor`	锚点组件标签

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

indexes Props 属性说明

属性名	说明	类型	默认值
indexList	索引字符列表。不传默认 `A-Z`	Array	-
sticky	索引是否吸顶	boolean	`true`
stickyOffset	锚点吸顶时与顶部的距离	number	`0`
zIndex	层级	number	`1`
scrollView	是否使用滚动视图	boolean	-
showTips	是否显示提示	boolean	-
color	索引颜色	string	-
activeColor	激活状态颜色	string	-
activeBgColor	激活状态背景色	string	-
tipsColor	提示文字颜色	string	-
tipsBgColor	提示背景色	string	-

indexes-anchor Props 属性说明

属性名	说明	类型	默认值
index	锚点索引字符	string	-
color	锚点颜色	string	-
activeColor	激活状态颜色	string	-
bgColor	锚点背景色	string	-
activeBgColor	激活状态背景色	string	-

Events 事件

事件名	说明	回调参数
select	点击索引时触发	index: string

Slots 插槽

名称	说明
default	索引内容

主题定制

组件提供了以下CSS变量，可用于自定义样式：

变量名称	默认值	描述
`--l-indexes-sidebar-color`	`$text-color-1`	索引颜色
`--l-indexes-sidebar-item-size`	`20px`	索引项大小
`--l-indexes-sidebar-font-size`	`12px`	索引字体大小
`--l-indexes-sidebar-line-height`	`20px`	索引行高
`--l-indexes-sidebar-active-color`	`white`	激活状态颜色
`--l-indexes-sidebar-active-bg-color`	`$primary-color`	激活状态背景色
`--l-indexes-sidebar-right`	`8px`	索引右侧距离
`--l-indexes-sidebar-padding`	`15px`	索引内边距
`--l-indexes-sidebar-tips-size`	`48px`	提示大小
`--l-indexes-sidebar-tips-font-size`	`20px`	提示字体大小
`--l-indexes-sidebar-tips-color`	`$primary-color`	提示颜色
`--l-indexes-sidebar-tips-bg-color`	`$primary-color-1`	提示背景色
`--l-indexes-sidebar-tips-right`	`38px`	提示右侧距离
`--l-indexes-anchor-color`	`$text-color-1`	锚点颜色
`--l-indexes-anchor-active-color`	`$primary-color`	激活状态颜色
`--l-indexes-anchor-bg-color`	`$gray-2`	锚点背景色
`--l-indexes-anchor-active-bg-color`	`$bg-color-container`	激活状态背景色
`--l-indexes-anchor-font-size`	`14px`	锚点字体大小
`--l-indexes-anchor-line-height`	`22px`	锚点行高
`--l-indexes-anchor-active-font-weight`	`700`	激活状态字体粗细
`--l-indexes-anchor-padding-x`	`16px`	水平内边距
`--l-indexes-anchor-padding-y`	`4px`	垂直内边距

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码

LimeIndexes 索引组件 ​

文档链接 ​

安装方法 ​

代码演示 ​

基础用法 ​

自定义索引列表 ​

ScrollView 容器 ​

快速预览 ​

插件标签说明 ​

Vue2使用说明 ​

API文档 ​

indexes Props 属性说明 ​

indexes-anchor Props 属性说明 ​

Events 事件 ​

Slots 插槽 ​

主题定制 ​

支持与赞赏 ​

源代码 ​

LimeIndexes 索引组件

文档链接

安装方法

代码演示

基础用法

自定义索引列表

ScrollView 容器

快速预览

插件标签说明

Vue2使用说明

API文档

indexes Props 属性说明

indexes-anchor Props 属性说明

Events 事件

Slots 插槽

主题定制

支持与赞赏

源代码