@retailwe/ui-index-bar NPM

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	`[]`	-