vant使用IndexBar索引栏

数据类型是二维数组

代码语言：javascript复制

<template>
  <div>
    <van-index-bar :index-list="indexList">
      <div v-for="(item,index) in peopleList" :key="index">
        <van-index-anchor :index="item.index" />
        <div class="cell" v-for="(row,index) in item.list" :key="index">
          <div class="cell-info">
            <div class="cell-avatar">
              <img :src="row.avatar" alt="">
            </div>
            <div class="cell-name">{{row.name}}</div>
          </div>
          <div class="cell-select"></div>
        </div>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        indexList: ["A", "B", "C"],
        peopleList: [{
          index: "A",
          list: [{
            avatar: "https://sucai.suoluomei.cn/sucai_zs/images/20201125135948-1.png",
            name: "wepanda"
          }, {
            avatar: "https://sucai.suoluomei.cn/sucai_zs/images/20201125135948-1.png",
            name: "wepanda"
          }, {
            avatar: "https://sucai.suoluomei.cn/sucai_zs/images/20201125135948-1.png",
            name: "wepanda"
          }]
        }, {
          index: "B",
          list: [{
            avatar: "https://sucai.suoluomei.cn/sucai_zs/images/20201125135948-1.png",
            name: "wepanda"
          }]
        }, {
          index: "C",
          list: [{
            avatar: "https://sucai.suoluomei.cn/sucai_zs/images/20201125135948-1.png",
            name: "wepanda"
          }]
        }]
      }
    },
    mounted() {},
    methods: {}
  }

</script>
<style lang="less" scoped>
  .cell {
    padding: 10px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-info {
      display: flex;
      align-items: center;
    }

    &-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
    }

    &-name {
      font-size: 14px;
      margin-left: 10px;
    }

    &-select {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

</style>

数据类型 数组

0 人点赞