# Indexed List 索引列表

微信由于使用 `observers` 特性，需要将基础库的版本需要在2.6.1以上，否则会触发右侧nav导航条不渲染的情况

## 引入

首先在页面 `index.json`中引入组件：

```json
{
  "usingComponents": {
    "tea-indexed-list": "../../dist/index/indexed-list"
  }
}
```

然后在对应的`wxml`页面中既可使用：

```html
<tea-indexed-list list="{{lists}}"></tea-indexed-list>
```

```js
page({
  data: {
    lists: [{
			group: 'A',
			list: [{
				text: '阿尔山'
			}, {
				text: '阿克苏'
			}, {
				text: '阿勒泰'
			}, {
				text: '安康'
			}, {
				text: '安庆'
			}, {
				text: '鞍山'
			}, {
				text: '安顺'
			}, {
				text: '安阳'
			}, {
				text: '澳码'
			}]
		},]
  }
})
```

## 用法

### 基本用法

## Props

| 参数               | 类型        | 默认值     |
| ---------------- | --------- | ------- |
| list             | `Array`   | `[]`    |
| hideAbbreviation | `Boolean` | `false` |

## Props list

| 参数    | 类型       | 默认值     | 描述        |
| ----- | -------- | ------- | --------- |
| group | `String` | -       | 右侧和模块展示内容 |
| list  | `String` | `false` | 子项        |

### Props list

| 参数   | 类型       | 默认值 | 描述   |
| ---- | -------- | --- | ---- |
| text | `String` | -   | 内容数据 |

## 事件

| 事件名    | 描述            | 回调参数                        |
| ------ | ------------- | --------------------------- |
| select | 用户选中列表某一项值时触发 | 选中项的所有数据，数据来源于 `lists item` |

## CSS变量属性表

| 变量名                   | 默认值                 | 描述  |
| --------------------- | ------------------- | --- |
| indexedListThemeColor | @text-primary-color | -   |
| indexedListBgColor    | @color-primary-2    | -   |
| indexedListTextColor  | @text-light-color   | -   |

## 演示

![indexed-list](/preview/indexed-list.png)