LimeUI+1.2.5

主题

LimeIndexes 索引组件 ​

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

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

文档链接 ​

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

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-indexes
  2. 导入后重新编译项目
  3. 在页面中按需引入并使用相关组件

代码演示 ​

基础用法 ​

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

html
<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并指定组件高度。

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

标记式 ​

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

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

快速预览 ​

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

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

组件说明 ​

组件名说明
l-indexes主索引组件，提供侧边栏索引和滚动定位功能
l-indexes-section带吸顶效果的锚点区域组件，用于显示索引标题和内容
l-indexes-anchor锚点组件，用于标记索引位置
l-indexes-view平台适配组件，在不同平台上提供适当的渲染方式

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

l-indexes Props 属性说明 ​

属性名说明类型默认值
sticky索引是否吸顶booleantrue
stickyOffset锚点吸顶时与顶部的距离number0
zIndex层级number1
scrollView是否使用滚动视图booleanfalse
showTips是否显示选中索引提示booleanfalse
color索引字符颜色string-
activeColor索引激活状态颜色string-
activeBgColor索引激活状态背景色string-
tipsColor提示文字颜色string-
tipsBgColor提示背景色string-
current当前选中的索引string-
reset是否重置选中状态(废除)booleanfalse

l-indexes Events 事件 ​

事件名说明回调参数
select点击索引时触发index: number
change滚动时触发或索引变化时触发name: string
update:current当前索引更新事件name: string

l-indexes-section Props 属性说明 ​

属性名说明类型默认值
index锚点索引字符string-
items子项列表数据any[]-

l-indexes-section Slots 插槽 ​

名称说明
default自定义内容
header自定义头部内容
item自定义子项内容，参数为 {item, index}

l-indexes-anchor Props 属性说明 ​

属性名说明类型默认值
index锚点索引字符string-

l-indexes-anchor Slots 插槽 ​

名称说明
default自定义内容

l-indexes-view Slots 插槽 ​

名称说明
default自定义内容

主题定制 ​

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

变量名称默认值描述
--l-indexes-sidebar-color$text-color-1索引颜色
--l-indexes-sidebar-item-size20px索引项大小
--l-indexes-sidebar-font-size12px索引字体大小
--l-indexes-sidebar-line-height20px索引行高
--l-indexes-sidebar-active-colorwhite激活状态颜色
--l-indexes-sidebar-active-bg-color$primary-color激活状态背景色
--l-indexes-sidebar-right8px索引右侧距离
--l-indexes-sidebar-padding15px索引内边距
--l-indexes-sidebar-tips-size48px提示大小
--l-indexes-sidebar-tips-font-size20px提示字体大小
--l-indexes-sidebar-tips-color$primary-color提示颜色
--l-indexes-sidebar-tips-bg-color$primary-color-1提示背景色
--l-indexes-sidebar-tips-right38px提示右侧距离
--l-indexes-anchor-color$text-color-1锚点颜色
--l-indexes-anchor-active-bg-color$bg-color-container激活状态描边色
--l-indexes-anchor-active-color$primary-color激活状态颜色
--l-indexes-anchor-active-border-color$primary-color激活状态颜色
--l-indexes-anchor-bg-color$gray-2锚点背景色
--l-indexes-anchor-font-size14px锚点字体大小
--l-indexes-anchor-line-height22px锚点行高
--l-indexes-anchor-active-font-weight700激活状态字体粗细
--l-indexes-anchor-padding-x16px水平内边距
--l-indexes-anchor-padding-y4px垂直内边距

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码