微信小程序实现双级联动菜单

设计点餐平台的时候，难免会遇到如图所示情况，当滑动右侧菜品的时候，左侧类别也会随着右侧的变化而变化；当点击左侧的类别，右侧也会跳转到相应类别的菜品。具体实现方法如下：

WXML展示，此处使用的是Color UI

<scroll-view scroll-y style="height: 100%;">
    <view class="VerticalBox" style="margin-top: 35rpx;">
        <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation style="height:1000rpx;width: 30vw;">
            <view class="cu-item {{index==tabCur?'text-green cur':''}} text-sm" wx:for="{{foodlist}}" wx:key="index" bindtap="TabSelect" data-id="{{index}}">
                {{item.type}}
            </view>
        </scroll-view>


        <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:1100rpx" bindscroll="VerticalMain" scroll-into-view="{{'main-'+mainCur}}">
            <view class="padding-top padding-lr" wx:for="{{list}}" wx:for-item="item1" wx:for-index="index1" wx:key="index1" id="{{'main-'+index1}}">
                <view class="cu-bar solid-bottom bg-white">
                    <view class="action">
                        <text class="cuIcon-title text-green"></text> {{item1.type}}
                    </view>
                </view>
                <view class="cu-list menu-avatar">
                    <view class="cu-item">
                        <image class="cu-avatar lg" src="{{item1.photo}}" lazy-load="{{true}}"></image>
                        <view class="content">
                            <view class="text-black" style="font-size: 25rpx;">{{item1.name}}</view>
                            <view class="text-price text-brown">{{item1.price}}</view>
                        </view>
                        <view class="action">
                            <view wx:if="{{item1.other==null}}" class="bg-red margin-left-lg text-xl" style="border-radius: 40rpx;width: 40rpx;height: 40rpx;line-height: 40rpx;" data-index="{{index1}}" bindtap="add1">+</view>
                            <view wx:else class="cu-tag bg-red round" data-index="{{index1}}" bindtap="add">选规格</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</scroll-view>

JavaScript实现

    TabSelect(e) {
        let count=this.data.count
        this.setData({
            tabCur:e.currentTarget.dataset.id,
            mainCur:count[e.currentTarget.dataset.id]
        })
    },
    VerticalMain(e) {
        let that = this;
        let tabHeight = 0;
        let count=this.data.count
        let k=0
        if (this.data.load) {
            for (let i = 0; i < this.data.list.length; i++) {
                let view =wx.createSelectorQuery().select("#main-" + this.data.list[i].id);
                
                view.fields({
                    size: true
                }, data => {
                    if(i==count[k]){
                        k++
                    let list=this.data.list
                    list[i].top = tabHeight
                    tabHeight = tabHeight + data.height
                    list[i].bottom = tabHeight
                    this.setData({
                        list:list
                    })
                }else{
                    let list=this.data.list
                    list[i].top = 0
                    tabHeight = tabHeight + data.height
                    list[i].bottom = 0
                    this.setData({
                        list:list
                    })
                }
                }).exec();
            }
            this.setData({
                load:false
            })
        }

        let scrollTop = e.detail.scrollTop + 10;
        for (let i = 0; i < this.data.list.length; i++) {
            if (scrollTop > this.data.list[i].top&& scrollTop < this.data.list[i].bottom) {
                this.setData({
                    tabCur : this.data.list[i].no
                })
                return false
            }
        }
    }