# 索引选择器 index
# 描述
用于在通讯录等场景中快速定位
# 使用效果
# 使用方法
在.ux文件中引入组件
<import name="my-index" src="apex-ui/components/index/index.ux"></import>
<import name="my-index-item" src="apex-ui/components/index-item/index.ux"></import>
1
2
2
# 示例
<template>
<div>
<my-index id="index1">
<block for="{{ names in alphabet }}">
<my-index-item group-id="index1" name="{{ names.initial }}">
<div class="content" for="{{ name in names.cells }}"><text>{{ name }}</text></div>
</my-index-item>
</block>
</my-index>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<style lang="less">
.content {
padding: 20px 15px;
border-bottom: 1px solid #eee;
text {
color: #000000;
font-size: 40px;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script>
const NAMES = ['Aaron', 'Alden', 'Austin', 'Baldwin', 'Braden', 'Carl', 'Chandler', 'Clyde', 'David', 'Edgar', 'Elton', 'Floyd', 'Freeman', 'Gavin', 'Hector', 'Henry', 'Ian', 'Jason', 'Joshua', 'Kane', 'Lambert', 'Matthew', 'Morgan', 'Neville', 'Oliver', 'Oscar', 'Perry', 'Quinn', 'Ramsey', 'Scott', 'Seth', 'Spencer', 'Timothy', 'Todd', 'Trevor', 'Udolf', 'Victor', 'Vincent', 'Walton', 'Willis', 'Xavier', 'Yvonne', 'Zack', 'Zane']
export default {
data() {
return {
alphabet: [],
}
},
onInit() {
const alphabet = []
'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach((initial) => {
const cells = NAMES.filter((name) => name.charAt(0) === initial)
alphabet.push({
initial,
cells
})
})
this.alphabet = alphabet
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# API
# index组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | String | '' | index组件ID，必填 |
| showIndicator | Boolean | true | 是否显示指示器 |
# index-item组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | String | '' | 标题 |
| groupId | String | '' | 所属的index组件的ID，必填 |
# index-item slot
| 名称 | 描述 |
|---|---|
| default | 自定义内容 |