indexbar 索引栏

引入

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

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

代码演示

基础用法

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

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

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