LimeUI+1.0.0

主题

LimeIndexes 索引栏 ​

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

文档 ​

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>
js
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>
js
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/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部分加上这一段即可.
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API ​

Indexes Props ​

参数说明类型默认值
index-list索引字符列表(string | number)[]A-Z
z-indexz-index 层级number | string1
sticky是否开启锚点自动吸顶，uvue不支持设置booleantrue
sticky-offset锚点自动吸顶时与顶部的距离，uvue不支持number0
color侧边栏文字颜色string-
activeColor侧边栏文字激活颜色string-
activeBgColor侧边栏文字激活背景颜色string-
tipsColor侧边栏提示文本色string-
tipsBgColor侧边栏提示文本背景色string-
scroll-view是否使用 scrollView 滚动，默认是页面booleanfalse

IndexesAnchor Props ​

参数说明类型默认值
index索引字符number | string-
color文本颜色string-
activeBgColor文字激活颜色string-
bgColor背景色string-
activeBgColor激活颜背景色string-

Indexes Events ​

事件名说明回调参数
select点击索引栏的字符时触发index: number | string
change当前高亮的索引字符变化时触发index: number | string

Indexes 方法 ​

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

方法名说明参数返回值
scrollTo滚动到指定锚点index: number | string-

IndexesAnchor Slots ​

名称说明
default锚点位置显示内容，默认为索引字符

主题定制 ​

样式变量 ​

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

名称默认值描述
--l-indexes-sidebar-active-bg-color#1677ff-
--l-indexes-sidebar-active-colorwhite-
--l-indexes-sidebar-colorrgba(0,0,0,0.9)-
--l-indexes-sidebar-font-size12px-
--l-indexes-sidebar-item-size20px-
--l-indexes-sidebar-line-height20px-
--l-indexes-sidebar-right8px-
--l-indexes-sidebar-tips-bg-colorrgba(#1677ff, 0.15)-
--l-indexes-sidebar-tips-color#1677ff-
--l-indexes-sidebar-tips-font-size20px-
--l-indexes-sidebar-tips-right38px-
--l-indexes-sidebar-tips-size48px-
--l-indexes-anchor-active-bg-colorwhite-
--l-indexes-anchor-active-color#1677ff-
--l-indexes-anchor-active-font-weight600-
--l-indexes-anchor-bg-color#f5f5f5-
--l-indexes-anchor-colorrgba(0,0,0,0.9)-
--l-indexes-anchor-font-size14px-
--l-indexes-anchor-line-height22px-
--l-indexes-anchor-padding4px 16px-

常见问题 ​

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

源代码 ​

组件源码