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'} ] } ]
浙公网安备 33010602011771号