# @retailwe/ui-index-bar

> ## 引入

Latest version **0.0.22** (published 2020-11-12) · 0 weekly downloads

## Install

```sh
npm install @retailwe/ui-index-bar
pnpm add @retailwe/ui-index-bar
yarn add @retailwe/ui-index-bar
bun add @retailwe/ui-index-bar
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.22 |
| Published | 2020-11-12 |
| First published | 2020-05-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rachelrgao, gaterking, jeannehuang, jerryc |

## Links

- npm: https://www.npmjs.com/package/@retailwe/ui-index-bar
- Repository: git@git.code.tencent.com:tencent-retail-fe/retailwe
- npm.io page: https://npm.io/package/@retailwe/ui-index-bar

## Recent versions

- 0.0.22 (latest) — 2020-11-12
- 0.0.20 (beta) — 2020-10-27
- 0.0.21 — 2020-11-09
- 0.0.19 — 2020-10-21
- 0.0.18 — 2020-10-15
- 0.0.17 — 2020-09-24
- 0.0.16 — 2020-08-27
- 0.0.15 — 2020-07-24
- 0.0.14 — 2020-07-13
- 0.0.13 — 2020-06-30
- 0.0.12 — 2020-06-23
- 0.0.11 — 2020-05-12
- 0.0.10 — 2020-05-09
- 0.0.9 — 2020-05-09
- 0.0.8 — 2020-05-08
- … 1 more at https://npm.io/package/@retailwe/ui-index-bar/versions

## README

# 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 的样式。
无需外部样式类，可直接在父组件/页面中覆盖样式。

---
_Source: https://npm.io/package/@retailwe/ui-index-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._