主题
LimeIndexes 索引栏
- 用于列表的索引分类显示和快速定位。
- 插件依赖
lime-shared
,lime-style
不喜勿下
文档
代码演示
基础用法
点击索引栏时,会自动跳转到对应的 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-index | z-index 层级 | number | string | 1 |
sticky | 是否开启锚点自动吸顶,uvue不支持设置 | boolean | true |
sticky-offset | 锚点自动吸顶时与顶部的距离,uvue不支持 | number | 0 |
scroll-view | 是否使用 scrollView 滚动,默认是页面 | boolean | false |
IndexesAnchor Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
index | 索引字符 | number | string | - |
Indexes Events
事件名 | 说明 | 回调参数 |
---|---|---|
select | 点击索引栏的字符时触发 | index: number | string |
change | 当前高亮的索引字符变化时触发 | index: number | string |
Indexes 方法
通过 ref 可以获取到 Indexes 实例并调用实例方法。
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
scrollTo | 滚动到指定锚点 | index: number | string | - |
IndexesAnchor Slots
名称 | 说明 |
---|---|
default | 锚点位置显示内容,默认为索引字符 |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述 |
---|---|---|
--l-indexes-sidebar-active-bg-color | #1677ff | - |
--l-indexes-sidebar-active-color | white | - |
--l-indexes-sidebar-color | rgba(0,0,0,0.9) | - |
--l-indexes-sidebar-font-size | 12px | - |
--l-indexes-sidebar-item-size | 20px | - |
--l-indexes-sidebar-line-height | 20px | - |
--l-indexes-sidebar-right | 8px | - |
--l-indexes-sidebar-tips-bg-color | rgba(#1677ff, 0.15) | - |
--l-indexes-sidebar-tips-color | #1677ff | - |
--l-indexes-sidebar-tips-font-size | 20px | - |
--l-indexes-sidebar-tips-right | 38px | - |
--l-indexes-sidebar-tips-size | 48px | - |
--l-indexes-anchor-active-bg-color | white | - |
--l-indexes-anchor-active-color | #1677ff | - |
--l-indexes-anchor-active-font-weight | 600 | - |
--l-indexes-anchor-bg-color | #f5f5f5 | - |
--l-indexes-anchor-color | rgba(0,0,0,0.9) | - |
--l-indexes-anchor-font-size | 14px | - |
--l-indexes-anchor-line-height | 22px | - |
--l-indexes-anchor-padding | 4px 16px | - |
常见问题
- 父级有设置
transform
会导致fixed
失效 - 字节必需页面存在
onPageScroll