tab左侧栏导航

<template>

    <view class="scroll-view-container">

//左边

        <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">

            <block v-for="(item,index) in cateList" :key="index">
                <view @click="activeChanged(index)" :class="['left-scroll-view-item', index === active ? 'active':'']">
                    {{item.cat_name}}
                </view>
            </block>

        </scroll-view>

    //右边
        <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
            <view class="cate-lv2" v-for="(item2,index2) in cateLevel2" :key="index2">
                <!-- 二级分类标题 -->
            

                <image :src="item2.image"></image>
                <view class="cate-lv2-title">{{item2.title}}</view>

            </view>
        </scroll-view>

        <MyTabbar></MyTabbar>

    </view>

</template>

<script>
    import MyTabbar from '../../components/tabBar.vue'
    import {
        API
    } from '../../api/index.js'
    export default {
        data() {
            return {
                // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
                wh: 0,
                // 分类数据列表
                cateList: [],
                active: 0,
                // 二级分类列表
                cateLevel2: [],
                // 滚动条距离顶部的距离
                scrollTop: 0
            }
        },
        components: {
            MyTabbar
        },
        onLoad() {
            // 获取当前系统的信息
            const sysInfo = uni.getSystemInfoSync()
            // 为 wh 窗口可用高度动态赋值
            this.wh = sysInfo.windowHeight - 50,

                this.zuopin()
        },
        methods: {
            zuopin() {
                API.zuopin({}).then(e => {

                    this.cateList = e.data
                    this.cateLevel2 = e.data[0].list
                    console.log(e);
                    console.log(this.cateList);
                    console.log(this.cateLevel2);
                })
            },
            activeChanged(index) {
                // 选中项改变的事件处理函数
                this.active = index
                this.cateLevel2 = this.cateList[index].list
                // 让 scrollTop 的值在 0 与 1 之间切换
                this.scrollTop = this.scrollTop === 0 ? 1 : 0
            },
        }
    }
</script>

<style lang="scss">
    .scroll-view-container {
        display: flex;

        .left-scroll-view {
            width: 120px;

            .left-scroll-view-item {
                line-height: 60px;
                background-color: #f7f7f7;
                text-align: center;
                font-size: 12px;

                // 激活项的样式
                &.active {
                    background-color: #ffffff;
                    position: relative;

                    // 渲染激活项左侧的红色指示边线
                    &::before {
                        content: ' ';
                        display: block;
                        width: 3px;
                        height: 30px;
                        background-color: #c00000;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
        }

        .cate-lv2-title {
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            padding: 15px 0;
        }

        .cate-lv3-list {
            display: flex;
            flex-wrap: wrap;

            .cate-lv3-item {
                width: 33.33%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                image {
                    width: 60px;
                    height: 60px;
                }

                text {
                    font-size: 12px;
                }
            }
        }
    }
</style>