四十 八 商品分类对应数据渲染（左右数据进行联动切换）

1. 左侧列表的数据渲染

2. 右侧列表数据渲染

3. 切换左侧列表，让右侧数据展示对应的内容

list完整代码

<template>
        <view>
                <Lines />
                <view class="list">
                        <!-- 左侧 -->
                        <scroll-view scroll-y="true" class="left-list" :style="{height:clentHeight+'px'}">
                                <view v-for="(item,index) in leftData" :key="index">
                                        <view class="left-item" :class='currentItem === index ? "active-item" :"left-item" '
                                                @tap="changeItem(index,item.id)">
                                                {{item.name}}
                                        </view>
                                </view>
                        </scroll-view>

                        <!-- 右侧 -->
                        <scroll-view scroll-y="true" class="right-list" :style="{height:clentHeight+'px'}">
                                <view class="right-item" v-for="(item,index) in rightData" :key="index">
                                        <block v-for="(i, k) in item" :key="k">
                                                <view class="right-title">
                                                        {{i.name}}
                                                </view>
                                                <view class="right-content">
                                                        <view class="right-list-item" v-for="(j,idx) in i.list" :key="idx">
                                                                <image class="right-img" :src="j.imgUrl" mode=""></image>
                                                                <view class="right-name">
                                                                        {{j.name}}
                                                                </view>
                                                        </view>
                                                </view>
                                        </block>
                                </view>
                        </scroll-view>
                </view>
        </view>
</template>

<script>
        import Lines from '@/components/common/lines.vue'
        import $http from '@/common/api/request.js'
        export default {
                data() {
                        return {
                                clentHeight: 0, // 组件的高度
                                currentItem: 0,
                                leftData: [],
                                rightData: []
                        }
                },
                onLoad() {
                        this.getListData()
                },
                components: {
                        Lines
                },
                // 点击顶栏跳转到搜索页面
                onNavigationBarSearchInputClicked() {
                        uni.navigateTo({
                                url: '../search/search'

                        })
                },
                onReady() {
                        // 获取系统信息 设置可视区域的值
                        uni.getSystemInfo({
                                success: (res) => {
                                        this.clentHeight = res.windowHeight - this.getClientHeight();
                                        console.log(res.windowHeight);
                                }
                        })

                },
                methods: {
                        // 获取可视区域的高【兼容】
                        getClientHeight() {
                                let res = uni.getSystemInfoSync()
                                let platform = res.platform
                                if (platform == 'android') {
                                        return res.statusBarHeight - 34
                                } else if (platform == 'ios') {
                                        return 44 + res.statusBarHeight
                                } else {
                                        return uni.upx2px(250)
                                }
                        },
                        // 点击左侧item 切换样式
                        changeItem(index, id) {
                                this.getListData(id);
                                this.currentItem = index
                        },
                        // 获取后端接口数据
                        getListData(id) {
                                // 判断如果右侧的数据对应的id和左侧item项的id相同，就直接return，否则就重新请求数据，正常渲染
                                if (id === (this.currentItem + 1)) {
                                        return;
                                }
                                $http.request({
                                        url: '/list'
                                }).then((res) => {
                                        console.log(res);
                                        let leftData = [];
                                        let rightData = [];
                                        res.forEach(v => {
                                                leftData.push({
                                                        id: v.id,
                                                        name: v.name
                                                })
                                                if (v.id === (this.currentItem + 1)) {
                                                        rightData.push(v.data)
                                                }
                                        })
                                        this.leftData = leftData
                                        this.rightData = rightData
                                }).catch(() => {
                                        uni.showTabBar({
                                                title: '请求失败',
                                                icon: 'none'
                                        })
                                })
                        }
                }
        }
</script>

<style>
        .list {
                display: flex;
        }

        .left-list {
                width: 300rpx;
                background-color: #F7F7F7;
        }

        .left-item {
                height: 60rpx;
                border-bottom: 2rpx solid #FFFFFF;
        }

        .active-item {
                border-left: 4rpx solid #49BDFB;
                background-color: #FFFFFF;
        }

        .right-item {
                padding-left: 20rpx;
        }

        .right-title {
                font-weight: bold;
        }

        .right-img {
                width: 100rpx;
                height: 100rpx;
        }

        .right-content {
                display: flex;
                flex-wrap: wrap;
        }

        .right-list-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-left: 4rpx;
        }
</style>