Vant IndexBar 索引栏 写左右联动

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