更新记录

0.0.7（2025-03-05）

• feat: 增加样式属性

0.0.6（2025-03-05）

• chore: 更新文档

0.0.5（2025-03-05）

• feat: 兼容uniappx

平台兼容性

lime-indexes 索引栏

• 用于列表的索引分类显示和快速定位。
• 插件依赖lime-shared,lime-style不喜勿下

文档

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/compoents/lime-indexes -->
<lime-indexes />

插件标签

• 默认 l-indexes 为 component
• 默认 l-indexes-anchor 为 component
• 默认 lime-indexes 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

API

Indexes Props

IndexesAnchor Props

Indexes Events

Indexes 方法

通过 ref 可以获取到 Indexes 实例并调用实例方法。

IndexesAnchor Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。uvue app无效

常见问题

• 父级有设置transform会导致 fixed 失效
• 字节必需页面存在onPageScroll