<template>
<van-index-bar :sticky="true" :sticky-offset-top="1" :index-list="indexList" class="anchor" sticky>
<div v-for="(item,index) in cate" :key="index">
<!-- //这里的indexList[index]要和{{indexList[index]}} 一样才能触发点击事件-->
<van-index-anchor class="index" :index="indexList[index]">{{indexList[index]}}</van-index-anchor>
<div class="mar d-flex flex-wrap">
<div class="fon" v-for="(item1,index1) in item" :key="index1">
<van-image class="img " :src="item1.cover" />
<div class="name ">{{item1.name}}</div>
</div>
</div>
</div>
</van-index-bar>
</template>
<script>
import Slots from '@/components/Slots.vue'
export default {
name: 'Cart',
data() {
return {
indexList: [
],
cate: [
],
}
},
components: {
Slots
},
methods: {
//获取数据
getData() {
this.$axios('/api/category/app_category').then(v => {
console.log(v.data.data);
v.data.data.forEach(res => {
this.indexList.push(res.name)
// console.log(res.app_category_items);
// this.cate.push(res.app_category_items)
this.cate.push(res.app_category_items)
// console.log(this.cate);
})
})
},
},
mounted() {
// console.log(this.getData());
this.getData()
},
}
</script>
下面的样式会使用到 样式穿透 :: v-deep
<style scoped>
::v-deep .van-index-bar__sidebar {
/* left: 0rem; */
position: fixed;
left: 0rem;
top: 0rem;
margin-top: 7.285714rem;
width: 25%;
}
.index {
text-align: center;
width: 75%;
float: right;
}
::v-deep .van-index-bar__index,
.van-index-bar__index--active {
background-color: white;
margin-bottom: 1.685714rem;
}
.fon {
font-size: 0.428571rem;
/* margin-left: 0.942857rem; */
margin: 0.142857rem 0.071428rem 0 0.071428rem;
}
.mar {
width: 75%;
float: right;
}
.name {
text-align: center;
margin: auto;
}
.img {
width: 2.128571rem;
height: 2.828571rem;
}
</style>