更新记录

0.0.9（2025-08-31）

• chore: 更新文档

0.0.8（2025-04-08）

• fix: 修复类型报错

0.0.7（2025-03-05）

• feat: 增加样式属性

平台兼容性

uni-app(4.75)

uni-app x(4.74)

其他

lime-indexes 索引组件

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

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

文档链接

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

• 索引组件文档 - 站点1
• 索引组件文档 - 站点2
• 索引组件文档 - 站点3

安装方法

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

代码演示

基础用法

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

<!-- 非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 属性自定义展示的索引字符列表。

<!-- 非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配合高度可以局部

<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)

快速预览

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

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

插件标签说明

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

indexes Props 属性说明

indexes-anchor Props 属性说明

Events 事件

Slots 插槽

主题定制

支持与赞赏

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

支付宝赞助	微信赞助