npm package: @retailwe/ui-index-bar
Description: ## 引入
Latest version: 0.0.22

# indexbar 索引栏

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "index-bar": "@retailwe/ui-index-bar/index"
}
```

## 代码演示

### 基础用法

通过`data`属性传入分组好的地址数据
通过在`height`属性指定 indexbar 的高度，未指定`height`时默认高度为`100%`

```html
<indexbar
  id="bar"
  data="{{ groups }}"
  height="{{ barHeight }}"
  bind:select="onSelect"
>
</indexbar>
```

```javascript
Page({
  data: {
    groups: [
      {
        title: 'A开头', // 分组名称，用于显示到列表上
        index: 'A', // 分组索引，用于显示到索引栏上
        children: [
          {
            title: '阿坝',
          },
          {
            title: '阿拉善',
          },
        ],
      },
      {
        title: 'B开头',
        index: 'B',
        children: [
          {
            title: '北京',
          },
          {
            title: '白银',
          },
          {
            title: '保定',
          },
          {
            title: '宝鸡',
          },
        ],
      },
      {
        title: 'C开头',
        index: 'C',
        children: [
          {
            title: '重庆',
          },
          {
            title: '成都',
          },
          {
            title: '长沙',
          },
        ],
      },
    ],
    barHeight: null,
  },
  onLoad() {},
  onReady() {
    // 根据组件距页面顶部的距离，动态计算组件的高度，使其不会溢出页面导致页面可滚动。
    this.getTopHeight().then(res => {
      const { windowHeight } = wx.getSystemInfoSync();
      this.setData({
        barHeight: windowHeight - res.top,
      });
    });
  },
  onShow() {},
  // 获取组件距页面顶部的距离
  getTopHeight() {
    return new Promise(resolve => {
      const query = wx.createSelectorQuery();
      query
        .select('#bar')
        .boundingClientRect(res => {
          resolve(res);
        })
        .exec();
    });
  },
  onSelect(e) {
    const { indexes } = e.detail;
    if (indexes.length < 2) {
      console.warn('需要两个index才能确定city');
      return;
    }
    const group = this.data.groups[indexes[0]];
    const city = group.children[indexes[1]];
    wx.showToast({
      icon: 'none',
      title: `你选择了: ${group.title}>${city.title}`,
    });
  },
});
```

## API

### indexbar Props

| 参数   | 说明                                               | 类型     | 默认值      | 版本 |
| ------ | -------------------------------------------------- | -------- | ----------- | ---- |
| data   | 已分组好的列表数据                                 | _array_  | -           | -    |
| height | 组件的高度，单位为`px`，未传此参数时高度将为`100%` | _number_ | `undefined` | -    |

#### indexbar 分组（data 参数的组成元素）

| 参数     | 说明                                          | 类型     | 默认值  | 版本 |
| -------- | --------------------------------------------- | -------- | ------- | ---- |
| title    | 显示到列表中的分组名称，未定义时取 index 的值 | _string_ | `index` | -    |
| index    | 显示到右侧索引栏的标记                        | _string_ | -       | -    |
| children | 该分组下的元素列表                            | _array_  | `[]`    | -    |

#### indexbar 行对象（children 的组成元素）

| 参数  | 说明             | 类型     | 默认值 | 版本 |
| ----- | ---------------- | -------- | ------ | ---- |
| title | 显示到每行的名称 | _string_ | -      | -    |

### indexbar Event

| 事件名 | 说明             | 参数                                                                      |
| ------ | ---------------- | ------------------------------------------------------------------------- |
| select | 点击行元素时触发 | 由分组 index 及其 children index 组成的数组 `[groupIndex, childrenIndex]` |

### indexbar 外部样式类

此组件的样式作用域为`shared`，并覆盖了 weUI 的样式。
无需外部样式类，可直接在父组件/页面中覆盖样式。