四十七 商品分类获取高度和点击添加样式

1 给左右两边的滚动区域，添加高度

2. 点击左侧item 切换样式

list.vue 完整代码

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

                        <!-- 右侧 -->
                        <scroll-view scroll-y="true" class="right-list" :style="{height:clentHeight+'px'}">
                                <view class="right-item" v-for="item in 4">
                                        <view class="right-title">
                                                家访
                                        </view>
                                        <view class="right-content">
                                                <view class="right-list-item" v-for="i in 15">
                                                        <image class="right-img" src="../../static/img/hot.png" mode=""></image>
                                                        <view class="right-name">
                                                                毛巾
                                                        </view>
                                                </view>
                                        </view>
                                </view>

                        </scroll-view>
                </view>
        </view>
</template>

<script>
        import Lines from '@/components/common/lines.vue'
        export default {
                data() {
                        return {
                                clentHeight: 0, // 组件的高度
                                currentItem: 1
                        }
                },
                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) {
                                this.currentItem = index
                        }
                }
        }
</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>