模仿商品分类点击效果

最近学习uniapp中的scroll-view可实现商品分类点击左边右边联动效果，怕忘了记录一下

<template>
    <view class="detail">
        <view class="left">
            <!-- @click="setId(index1)点击设置当前索引为秒点 -->
            <scroll-view scroll-y="true">
                <view v-for="(item1,index1) in items" :key='index1' @click="setId(index1)">
                    {{item1.title}}
                </view>
            </scroll-view>
        </view>
        <view class="right">
            <!-- scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 -->
            <scroll-view scroll-y="true" :scroll-into-view="titleId">
                <view v-for="(item2,index2) in items" :key='index2'>
                    <!-- :id="'po'+index2" 设置当前标题为ID -->
                    <view class="title" :id="'po'+index2">
                        {{item2.title}}
                    </view>

                    <view v-for="(item3,index3) in item2.list" :key='index3'>
                        {{item3}}
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                items: [{
                        title: '手机数码',
                        list: ['小米', '华为', '荣耀', 'iphone', 'vivo', 'oppo', '魅族', '三星']
                    },
                    {
                        title: '电脑办公',
                        list: ['轻薄本', '游戏本', '机械键盘', '组装电脑', '移动硬盘', '显卡', '游戏台式机', '家用打印机']
                    },
                    {
                        title: '家用电器',
                        list: ['电压力锅', '电水壶', '电饭煲', '电磁炉', '微波炉', '电饼铛']
                    }
                ],
                titleId: '' //当描点
            }
        },
        onLoad() {

        },
        methods: {
            setId(index) {
                //获取点击索引并设置描点值
                this.titleId = 'po' + index
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        height: 100%;
    }

    .detail {
        display: flex;
        height: 100%;

        scroll-view {
            height: 100%;
        }

        .left {
            line-height: 70rpx;
            width: 200rpx;
            text-align: center;
        }

        .right {
            line-height: 70rpx;
            width: 100%;

            .title {
                background-color: #C8C7CC;
            }
        }
    }
</style>

注意的地方都已经代码中加了注释

增加左侧点击后右侧动画滚动效果，增加scroll-with-animation即可

<scroll-view scroll-y="true" 
:scroll-into-view="titleId" 
scroll-with-animation
>