bz-indexed-list 索引列表

基本用法

面包屑由 bz-indexed-list 和 bz-indexed-anchor 构成

扫码预览

用BoosHi扫码或PC端点击

<template>
  <view class="demo-ui-page">
    <view class="demo-title">bz-indexed-list 索引列表</view>
    <demo-cell>
      <view class="demo-content">
        <bz-indexed-list
          class="demo-bz-indexed-list"
          :indexList="getDataIndexList"
        >
          <template v-for="(indexItem, indexKey) in getDataIndexList">
            <bz-indexed-anchor
              class="demo-indexed-list-anchor"
              :key="indexItem + indexKey"
              :indexedKey="indexItem"
              >{{ "" }}</bz-indexed-anchor
            >
            <view class="demo-indexed-list-myanchor" :key="'view' + indexKey">{{
              indexItem
            }}</view>
            <view :key="'key' + indexKey" class="demo-indexed-item">
              <view
                v-for="(item, key) in dataList[indexItem]"
                :key="'item' + key"
              >
                {{ item.staffName }}
              </view>
            </view>
          </template>
        </bz-indexed-list>
      </view>
    </demo-cell>
  </view>
</template>

<script>
import staffData from "./staff";
const mapContractByPY = function (arr, key = "staffNameGroup") {
  return arr.reduce((cur, next) => {
    const groupkey = next[key] ? next[key] : "-";
    if (!cur.hasOwnProperty(groupkey)) {
      cur[groupkey] = [next];
    } else {
      cur[groupkey].push(next);
    }
    return cur;
  }, {});
};
export default {
  data() {
    return {
      dataList: this.getStaffData(),
    };
  },
  computed: {
    getDataIndexList() {
      return Object.keys(this.dataList).sort((cur, next) => {
        return cur.charCodeAt(0) - next.charCodeAt(0);
      });
    },
  },
  methods: {
    getStaffData() {
      return mapContractByPY(staffData);
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-content {
  padding: 24px 4px;
  width: 400px;
  max-width: 100%;
  height: 500px;
  border: 2px solid #222;
  border-bottom-width: 15px;
  border-radius: 8px;
  font-size: 15px;
  color: #222;
  background-color: #fff;
  box-sizing: border-box;
}
.demo-bz-indexed-list {
  padding-left: 10px;
}
.demo-indexed-list-myanchor {
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  font-size: 13px;
  color: #bbb;
  position: sticky;
  top: 0;
}
.demo-indexed-item {
  padding: 3px 0;
  margin-bottom: 6px;
}
</style>

展开 刷新 关闭

属性说明

IndexedList Props

属性名	类型	默认值	必填	说明
indexList	String[]	-	-	索引列表([key_a, key_b, key_c...], 非数据列表)
color	String	蓝色	-	主题颜色

IndexedAnchor Props

属性名	类型	默认值	必填	说明
indexedKey	String	-	是	索引列表使用的 key