uniapp双联动（商品类名选择）_active:index===currentnum

<template>
    <view>
        <view class="ld">
            <view class="left">
                <view v-for="(item,index) in list" :key="index" @click="setId(index)" :class="{active:index==currentNum}">
                    {{item.title}}
                </view>
            </view>
            <view class="right">
                <scroll-view scroll-y="true" @scroll="scroll" @scrolltolower="scrolltolower" :scroll-into-view="clickId" style="white-space: nowrap;height: 400rpx;">
                    <view v-for="(item,index) in list" :key="index">
                        <view class="title" :id="'po'+index">{{item.title}}</view>
                        <view v-for="(it,idx) in item.list" :key="idx">
                            {{it}}
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[
                    {title:"中餐",list:['盖浇饭','扒饭','咖喱饭','鸡排饭']},
                    {title:"西餐",list:['牛排','意面','芝士','汉堡']},
                    {title:"快餐",list:['薯条','丸子','包子','丸子']},
                    {title:"法餐",list:['红酒','牛排','咖啡','水果']},
                ],
                clickId:'',
                currentNum:0,
                topList:[]
            }
        },
        onReady() {
            this.getNodesInfo()
        },
        methods: {
            setId(index){
                this.clickId="po"+index
                this.currentNum=index
            },
            scroll(e){
                let scrollTop =  e.detail.scrollTop
                // let i = 0;i<this.list.length;i++
                for(let i of this.list.keys()){
                    let h1=this.topList[i]
                    let h2=this.topList[i+1]
                    if(scrollTop>=h1&&screenTop<h2){
                        this.currentNum=i
                    }
                }
            },
            scrolltolower(){
                setTimeout(()=>{
                    this.currentNum=3
                }, 80);
            },
            getNodesInfo(){
                const query = uni.createSelectorQuery().in(this);
                query.selectAll('.title').boundingClientRect(res => {
                    let rel = []
                  res.map(item=>{
                        rel.push(item.top)
                    })
                        this.topList=rel
                }).exec();
            }
        }
    }
</script>

<style lang="scss">
.ld{
    display: flex;
    .left{
        width: 100rpx;
        border: 1px solid red;
    }
    .right{
        flex: 1;
    }
}
.title{
    font-size: 36rpx;
    font-weight: bold;
    background: pink;
}
.active{
    background: #DD524D;
}
</style>