Vant使用IndexBar索引栏

 

 

 

 

数据类型是二维数组

<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>

转载：https://blog.csdn.net/AK852369/article/details/112666389

 

------------------------------------------------------------------自己--------------------------------------------------------------------------------------------------

 

 

 

    <van-index-bar :sticky-offset-top="60" sticky-offset-bottom="80" style="margin-top:62px" :index-list="indexList">
      <div v-for="(item,index) in projectDatas" :key="index">
       
      <van-index-anchor  :index="item.index" />
      
        <div class="content" v-for="(citem,cindex) in item.list" :key="cindex">
          <div class="content_top_jz">
            <div class="ctj_left">
                <div class="ctj_left_top">
                    <span>{{citem.pro_name}}</span>
                </div>
                <div class="ctj_left_bottom">
                    <div class="ctj_left_bottom_1">
                      <span>{{citem.offine}}</span>  
                    </div>
                    |
                    <div class="ctj_left_bottom_2">
                      {{citem.group}}
                  </div>
                  |
                  <div class="ctj_left_bottom_3">
                    {{citem.wd}}
                  </div>
              </div>
            </div>
            <div class="ctj_right">
                <img :src="ctj_img" alt="" srcset="">
              </div>
          </div>
          <div class="content_bottom_jz">
                <div class="cbj_1">
                    <div class="cbj_1_top">
                      {{citem.w1}}
                    </div>
                    <div class="cbj_1_bttom">
                      {{citem.v1}}
                  </div>
                </div>
                <div class="cbj_2">
                  <div class="cbj_1_top">
                    {{citem.w2}}
                    </div>
                    <div class="cbj_1_bttom">
                      {{citem.v2}}
                  </div>
                  </div>
                  <div class="cbj_3">
                    <div class="cbj_1_top">
                      {{citem.w3}}
                    </div>
                    <div class="cbj_1_bttom">
                      {{citem.v3}}
                  </div>
                  </div>
                  <div class="cbj_4">
                    <div class="cbj_1_top">
                      {{citem.w4}}
                    </div>
                    <div class="cbj_1_bttom">
                      {{citem.v4}}
                  </div>
                  </div>
          </div>
        </div>

      </div>
    </van-index-bar>

 indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
      projectDatas:[
        {
          index:"A",
          list:
            [
          {'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}
          , {'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}
          ,{'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}  
            ]
        },
        {
          index:"B",
          list:
            [
          {'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}
          , {'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}
          ,{'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}  
            ]
        },
        {
          index:"C",
          list:
            [
          {'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}
          , {'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}
          ,{'pro_name':'冷冻箱NA9354s (徐州)','offine':'离线','group':'未分组','wd':'-25°C ~ -10°C','w1':'冷箱温度','w2':'冷库湿度','w3':'化霜压力','w4':'高压压力','v1':'10°C','v2':'30°C','v3':'80°C','v4':'无Bar'}  
            ]
        }
      ]