更新记录

0.1.1（2025-12-09）

• feat: 重构

0.1.0（2025-11-15）

• fix： 修复uniapp缺少name的变量导致无法获取尺寸

0.0.9（2025-08-31）

• chore: 更新文档

平台兼容性

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和相关子组件创建完整的索引列表，索引会自动从l-indexes-section的index属性收集。所有平台都支持此用法。以下是非循环方式的显式示例，更直观地展示组件结构：

<l-indexes :showTips="true">
  <!-- A组 -->
  <l-indexes-section index="A">
    <view class="index-item">
      <view class="index-item-info">
        <text class="index-item-name">阿坝</text>
        <text class="index-item-desc">513200</text>
      </view>
    </view>
   <view class="index-item">
     <view class="index-item-info">
       <text class="index-item-name">阿拉善</text>
       <text class="index-item-desc">152900</text>
     </view>
   </view>
  </l-indexes-section>

  <!-- B组 -->
  <l-indexes-section index="B">
   <view class="index-item">
     <view class="index-item-info">
       <text class="index-item-name">北京</text>
       <text class="index-item-desc">110000</text>
     </view>
   </view>
   <view class="index-item">
     <view class="index-item-info">
       <text class="index-item-name">保定</text>
       <text class="index-item-desc">130600</text>
     </view>
   </view>
  </l-indexes-section>
</l-indexes>

说明：

• 每个l-indexes-section代表一个索引分组，index属性指定分组的索引字符
• 在实际项目中，可以根据需要选择循环方式或显式方式

ScrollView 容器

在需要局部使用索引组件的场景中，设置scrollView属性为true并指定组件高度。

<l-indexes scroll-view style="height: 500px">
  <!-- 内容结构 -->
</l-indexes>

标记式

使用 anchor 标记式需要根据平台条件编译的使用，它节点最少性能应该最好。在uniappx APP平台使用sticky-section和list-item组件获得更好的性能。

<l-indexes :showTips="true">
  <!-- #ifdef APP-ANDROID || APP-IOS  -->
  <sticky-section v-for="item in list" :key="item.index">
    <l-indexes-anchor :index="item.index" />
    <list-item class="platform-item" v-for="(val, i) in item.children" :key="i">
      <image class="platform-item-avatar" :src="'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/avatar-' + (i % 5 + 1) + '.png'"></image>
      <text class="platform-item-title">{{val.name}}</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="platform-item" v-for="(val, i) in item.children" :key="i">
      <text class="platform-item-title">{{val.name}}</text>
    </view>
  </template>
  <!-- #endif -->
</l-indexes>

快速预览

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

<!-- 代码位于 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文档

l-indexes Props 属性说明

l-indexes Events 事件

l-indexes-section Props 属性说明

l-indexes-section Slots 插槽

l-indexes-anchor Props 属性说明

l-indexes-anchor Slots 插槽

l-indexes-view Slots 插槽

主题定制

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

支持与赞赏

如果本组件对你有帮助，欢迎支持作者：

支付宝赞助	微信赞助