uniapp左右联动菜单

uniapp左右联动菜单<template><viewclass="u-wrap"><viewclass="u-search-box"><viewclass="u-search-inner"><u-iconname="search"color="#909399":size="28"></u-icon><textclass="u-search-text">搜索</text></view></view><viewclass="u-menu-wrap"><scroll-viewscroll-yscroll-with-animationclass="u-tab-viewmenu-scroll-view":scroll-top="scrollTop":scroll-into-view="itemId"><viewv-for="(item,index)intabbar":key="index"class="u-tab-item":class="[current==index?'u-tab-item-active':'']"@tap.stop="swichMenu(index)"><textclass="u-line-1">{{}}</text></view></scroll-view><scroll-view:scroll-top="scrollRightTop"scroll-yscroll-with-animationclass="right-box"@scroll="rightScroll"><viewclass="view"><viewclass="class-item":id="'item'+index"v-for="(item,index)intabbar":key="index"><viewclass="item-title"><text>{{}}</text></view><viewclass="item-container"><viewclass="thumb-box"v-for="(item1,index1)initem.foods":key="index1"><imageclass="item-menu-image":src="item1.icon"mode=""></image><viewclass="item-menu-name">{{}}</view></view></view></view></view></scroll-view></view></view></template><script>importclassifyDatafrom'@/common/classify.data.js';exportdefault{data(){return{scrollTop:0,//tab标题的滚动条位置oldScrollTop:0,current:0,//预设当前项的值menuHeight:0,//左边菜单的⾼度menuItemHeight:0,//左边菜单item的⾼度itemId:'',//栏⽬右边scroll-view⽤于滚动的idtabbar:classifyData,menuItemPos:[],arr:[],scrollRightTop:0,//右边栏⽬scroll-view的滚动条⾼度timer:null,//定时器}},onLoad(){},onReady(){this.getMenuItemTop()},methods:{//点击左边的栏⽬切换asyncswichMenu(index){if(this.arr.length==0){awaitthis.getMenuItemTop();}if(index==this.current)return;this.scrollRightTop=this.oldScrollTop;this.$nextTick(function(){this.scrollRightTop=this.arr[index];this.current=index;this.leftMenuStatus(index);})},//获取⼀个⽬标元素的⾼度getElRect(elClass,dataVal){newPromise((resolve,reject)=>{constquery=uni.createSelectorQuery().in(this);query.select('.'+elClass).fields({size:true},res=>{//如果节点尚未⽣成，res值为null，循环调⽤执⾏if(!res){setTimeout(()=>{this.getElRect(elClass);},10);return;}this[dataVal]=res.height;resolve();}).exec();})},//观测元素相交状态asyncobserver(){this.tabbar.map((val,index)=>{letobserver=uni.createIntersectionObserver(this);//检测右边scroll-view的id为itemxx的元素与right-box的相交状态//如果跟.right-box底部相交，就动态设置左边栏⽬的活动状态observer.relativeTo('.right-box',{top:0}).observe('#item'+index,res=>{if(ersectionRatio>0){letid=res.id.substring(4);this.leftMenuStatus(id);}})})},//设置左边菜单的滚动状态asyncleftMenuStatus(index){this.current=index;//如果为0，意味着尚未初始化if(this.menuHeight==0||this.menuItemHeight==0){awaitthis.getElRect('menu-scroll-view','menuHeight');awaitthis.getElRect('u-tab-item','menuItemHeight');}//将菜单活动item垂直居中this.scrollTop=index*this.menuItemHeight+this.menuItemHeight/2-this.menuHeight/2;},//获取右边菜单每个item到顶部的距离getMenuItemTop(){newPromise(resolve=>{letselectorQuery=uni.createSelectorQuery();selectorQuery.selectAll('.class-item').boundingClientRect((rects)=>{//如果节点尚未⽣成，rects值为[](因为⽤selectAll，所以返回的是数组)，循环调⽤执⾏if(!rects.length){setTimeout(()=>{this.getMenuItemTop();},10);return;}rects.forEach((rect)=>{//这⾥减去rects[0].top，是因为第⼀项顶部可能不是贴到导航栏(⽐如有个搜索框的情况)this.arr.push(rect.top-rects[0].top);resolve();})}).exec()})},//右边菜单滚动asyncrightScroll(e){this.oldScrollTop=e.detail.scrollTop;if(this.arr.length==0){awaitthis.getMenuItemTop();}if(this.timer)return;if(!this.menuHeight){awaitthis.getElRect('menu-scroll-view','menuHeight');}setTimeout(()=>{//节流this.timer=null;//scrollHeight为右边菜单垂直中点位置letscrollHeight=e.detail.scrollTop+this.menuHeight/2;for(leti=0;i<this.arr.length;i++){letheight1=this.arr[i];letheight2=this.arr[i+1];//如果不存在height2，意味着数据循环已经到了最后⼀个，设置左边菜单为最后⼀项即可if(!height2||scrollHeight>=height1&&scrollHeight<height2){this.leftMenuStatus(i);return;}}},10)}}}</script><stylelang="scss"scoped>.u-wrap{height:calc(100vh);/*#ifdefH5*/height:calc(100vh-var(--window-top));/*#endif*/display:flex;flex-direction:column;}.u-search-box{padding:18rpx30rpx;}.u-menu-wrap{flex:1;display:flex;overflow:hidden;}.u-search-inner{.u-search-inner{background-color:rgb(234,234,234);border-radius:100rpx;display:flex;align-items:center;padding:10rpx16rpx;}.u-search-text{font-size:26rpx;color:$u-tips-color;margin-left:10rpx;}.u-tab-view{width:200rpx;height:100%;}.u-tab-item{height:110rpx;background:#f6f6f6;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:26rpx;color:#444;font-weight:400;line-height:1;}.u-tab-item-active{position:relative;color:#000;font-size:30rpx;font-weight:600;background:#fff;}.u-tab-item-active::before{content:"";position:absolute;border-left:4pxsolid$u-type-primary;height:32rpx;left:0;top:39rpx;}.u-tab-view{height:100%;}.right-box{background-color:rgb(250,250,250);}.view{padding:16rpx;}.class-item{margin-bottom:30rpx;background-color:#fff;padding:16rpx;border-radius:8rpx;border-radius:8rpx;}.class-item:last-child{min-height:100vh;}.item-title{font-size:26rpx;color:$u-main-color;font-weight:bold;}.item-menu-name{font-weight:normal;font-size:24rpx;color:$u-main-color;}.item-container{display:flex;flex-wrap:wrap;}.thumb-box{width:33.333333%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-top:20rpx;}.item-menu-image{width:120rpx;height:120rpx;}</style>classify.data.jsexportdefault[{"name":"⼥装","foods":[{"name":"A字裙","key":"A字裙","icon":"/uview/common/classify/1/1.jpg","cat":10},{"name":"T恤","key":"T恤","icon":"/uview/common/classify/1/2.jpg","cat":10},{"name":"半⾝裙","key":"半⾝裙","icon":"/uview/common/classify/1/3.jpg","cat":10},{{"name":"衬衫","key":"衬衫","icon":"/uview/common/classify/1/4.jpg","cat":10},{"name":"短裙","key":"短裙","icon":"/uview/common/classify/1/5.jpg","cat":10},{"name":"阔腿裤","key":"阔腿裤","icon":"/uview/common/classify/1/6.jpg","cat":10},{"name":"连⾐裙","key":"连⾐裙","icon":"/uview/common/classify/1/7.jpg","cat":10},{"name":"妈妈装","key":"妈妈装","icon":"/uview/common/classify/1/8.jpg","cat":10},{"name":"⽜仔裤","key":"⽜仔裤","icon":"/uview/common/classify/1/9.jpg","cat":10},{"name":"情侣装","key":"情侣装","icon":"/uview/common/classify/1/10.jpg","cat":10},{"name":"休闲裤","key":"休闲裤","icon":"/uview/common/classify/1/11.jpg","cat":10},{"name":"雪纺衫","key":"雪纺衫","icon":"/uview/common/classify/1/12.jpg","cat":10},{"name":"防晒⾐","key":"防晒⾐","icon":"/uview/common/classify/1/13.jpg","cat":10},{"name":"礼服/婚纱","key":"礼服婚纱","icon":"/uview/common/classify/1/14.jpg","cat":10}}]},{"name":"美⾷","foods":[{"name":"⽕锅","key":"⽕锅","icon":"/uview/common/classify/2/1.jpg","cat":6},{"name":"糕点饼⼲","key":"糕点饼⼲","icon":"/uview/common/classify/2/2.jpg","cat":6},{"name":"坚果果⼲","key":"坚果果⼲","icon":"/uview/common/classify/2/3.jpg","cat":6},{"name":"酒类","key":"酒类","icon":"/uview/common/classify/2/4.jpg","cat":6},{"name":"辣条","key":"辣条","icon":"/uview/common/classify/2/5.jpg","cat":6},{"name":"⼤礼包","key":"⼤礼包","icon":"/uview/common/classify/2/6.jpg","cat":6},{"name":"精品茗茶","key":"茶","icon":"/uview/common/classify/2/7.jpg","cat":6},{"name":"休闲⾷品","key":"休闲⾷品","icon":"/uview/common/classify/2/8.jpg","cat":6},{"name":"糖果巧克⼒","key":"糖果巧克⼒","icon":"/uview/common/classify/2/9.jpg","cat":6},{"name":"⽅便速⾷","key":"⽅便速⾷","icon":"/uview/common/classify/2/10.jpg","cat":6},},{"name":"营养代餐","key":"营养代餐","icon":"/uview/common/classify/2/11.jpg","cat":6},{"name":"粮油副⾷","key":"粮油","icon":"/uview/common/classify/2/12.jpg","cat":6},{"name":"⽣鲜⽔果","key":"⽔果","icon":"/uview/common/classify/2/13.jpg","cat":6},{"name":"饮品","key":"饮品","icon":"/uview/common/classify/2/14.jpg","cat":6}]},{"name":"美妆","foods":[{"name":"化妆刷","key":"化妆刷","icon":"/uview/common/classify/3/1.jpg","cat":3},{"name":"粉底","key":"粉底","icon":"/uview/common/classify/3/2.jpg","cat":3},{"name":"洗发护发","key":"洗发护发","icon":"/uview/common/classify/3/3.jpg","cat":3},{"name":"美容⼯具","key":"美容⼯具","icon":"/uview/common/classify/3/4.jpg","cat":3},{"name":"眼部护理","key":"眼部护理","icon":"/uview/common/classify/3/5.jpg","cat":3},{"name":"眉妆","key":"眉妆","icon":"/uview/common/classify/3/6.jpg","cat":3},{"name":"卸妆品","key":"卸妆品","icon":"/uview/common/classify/3/7.jpg","cat":3},{"name":"基础护肤","key":"基础护肤","icon":"/uview/common/classify/3/8.jpg","cat":3},{"name":"眼妆","key":"眼妆","icon":"/uview/common/classify/3/9.jpg","cat":3},{"name":"唇妆","key":"唇妆","icon":"/uview/common/classify/3/10.jpg","cat":3},{"name":"⾯膜","key":"⾯膜","icon":"/uview/common/classify/3/11.jpg","cat":3},{"name":"沐浴⽤品","key":"沐浴⽤品","icon":"/uview/common/classify/3/12.jpg","cat":3},{"name":"护肤套装","key":"护肤套装","icon":"/uview/common/classify/3/13.jpg","cat":3},{"name":"防晒品","key":"防晒品","icon":"/uview/common/classify/3/14.jpg","cat":3},{"name":"美甲","key":"美甲","icon":"/uview/common/classify/3/15.jpg","cat":3}]},{"name":"居家⽇⽤","foods":[{"name":"垃圾袋","key":"垃圾袋","icon":"/uview/common/classify/4/1.jpg","cat":4},{"name":"纸⼱","key":"纸⼱","icon":"/uview/common/classify/4/2.jpg","cat":4},{"name":"驱蚊⽤品","key":"驱蚊⽤品","icon":"/uview/common/classify/4/3.jpg","cat":4},{"name":"收纳神器","key":"收纳神器","icon":"/uview/common/classify/4/4.jpg","cat":4},{"name":"厨房⽤品","key":"厨房⽤品","icon":"/uview/common/classify/4/5.jpg","cat":4},{"name":"厨房烹饪","key":"烹饪","icon":"/uview/common/classify/4/6.jpg","cat":4},{"name":"⾐物晾晒","key":"⾐物晾晒","icon":"/uview/common/classify/4/7.jpg","cat":4},{"name":"⾐物护理","key":"⾐物护理","icon":"/uview/common/classify/4/8.jpg","cat":4},{"name":"宠物⽤品","key":"宠物⽤品","icon":"/uview/common/classify/4/9.jpg","cat":4},{"name":"医药保健","key":"医药","icon":"/uview/common/classify/4/10.jpg","cat":4},{"name":"⽇⽤百货","key":"百货","icon":"/uview/common/classify/4/11.jpg","cat":4},{"name":"清洁⽤品","key":"清洁","icon":"/uview/common/classify/4/12.jpg","cat":4},{"name":"绿植园艺","key":"绿植","icon":"/uview/common/classify/4/13.jpg","cat":4}]},{"name":"男装","foods":[{"name":"爸爸装","key":"爸爸装","icon":"/uview/common/classify/5/1.jpg","cat":12},{"name":"⽜仔裤","key":"⽜仔裤","icon":"/uview/common/classify/5/2.jpg","cat":12},{"name":"衬衫","key":"衬衫","icon":"/uview/common/classify/5/3.jpg","cat":12},{"name":"休闲裤","key":"休闲裤","icon":"/uview/common/classify/5/4.jpg","cat":12},{"name":"外套","key":"外套","icon":"/uview/common/classify/5/5.jpg","cat":12},{"name":"T恤","key":"T恤","icon":"/uview/common/classify/5/6.jpg","cat":12},{"name":"套装","key":"套装","icon":"/uview/common/classify/5/7.jpg","cat":12},{"name":"运动裤","key":"运动裤","icon":"/uview/common/classify/5/8.jpg","cat":12},{"name":"马甲/背⼼","key":"马甲背⼼","icon":"/uview/common/classify/5/9.jpg","cat":12},{"name":"POLO衫","key":"POLO衫","icon":"/uview/common/classify/5/10.jpg","cat":12},{"name":"商务装","key":"商务装","icon":"/uview/common/classify/5/11.jpg","cat":12}]},{"name":"鞋品","foods":[{"name":"单鞋","key":"单鞋","icon":"/uview/common/classify/6/1.jpg","cat":5},{"name":"⽪鞋","key":"⽪鞋","icon":"/uview/common/classify/6/2.jpg","cat":5},{"name":"帆布鞋","key":"帆布鞋","icon":"/uview/common/classify/6/3.jpg","cat":5},{"name":"北京⽼布鞋","key":"北京⽼布鞋","icon":"/uview/common/classify/6/4.jpg","cat":5},{"name":"运动鞋","key":"运动鞋","icon":"/uview/common/classify/6/5.jpg","cat":5},{"name":"拖鞋","key":"拖鞋","icon":"/uview/common/classify/6/6.jpg","cat":5},{"name":"凉鞋","key":"凉鞋","icon":"/uview/common/classify/6/7.jpg","cat":5},{"name":"休闲鞋","key":"休闲鞋","icon":"/uview/common/classify/6/8.jpg","cat":5},{"name":"⾼跟鞋","key":"⾼跟鞋","icon":"/uview/common/classify/6/9.jpg","cat":5},{"name":"⽼⼈鞋","key":"⽼⼈鞋","icon":"/uview/common/classify/6/10.jpg","cat":5},{"name":"懒⼈鞋","key":"懒⼈鞋","icon":"/uview/common/classify/6/11.jpg","cat":5}]},{"name":"数码家电","foods":[{"name":"数据线","key":"数据线","icon":"/uview/common/classify/7/1.jpg","cat":8},{"name":"⽿机","key":"⽿机","icon":"/uview/common/classify/7/2.jpg","cat":8},{"name":"⽣活家电","key":"家电","icon":"/uview/common/classify/7/3.jpg","cat":8},{"name":"电风扇","key":"电风扇","icon":"/uview/common/classify/7/4.jpg","cat":8},{"name":"电吹风","key":"电吹风","icon":"/uview/common/classify/7/5.jpg","cat":8},{"name":"⼿机壳","key":"⼿机壳","icon":"/uview/common/classify/7/6.jpg","cat":8},{"name":"榨汁机","key":"榨汁机","icon":"/uview/common/classify/7/7.jpg","cat":8"cat":8},{"name":"⼩家电","key":"⼩家电","icon":"/uview/common/classify/7/8.jpg","cat":8},{"name":"数码电⼦","key":"数码","icon":"/uview/common/classify/7/9.jpg","cat":8},{"name":"电饭锅","key":"电饭锅","icon":"/uview/common/classify/7/10.jpg","cat":8},{"name":"⼿机⽀架","key":"⼿机⽀架","icon":"/uview/common/classify/7/11.jpg","cat":8},{"name":"剃须⼑","key":"剃须⼑","icon":"/uview/common/classify/7/12.jpg","cat":8},{"name":"充电宝","key":"充电宝","icon":"/uview/common/classify/7/13.jpg","cat":8},{"name":"⼿机配件","key":"⼿机配件","icon":"/uview/common/classify/7/14.jpg","cat":8}]},{"name":"母婴","foods":[{"name":"婴童服饰","key":"⾐服","icon":"/uview/common/classify/8/1.jpg","cat":2},{"name":"玩具乐器","key":"玩具乐器","icon":"/uview/common/classify/8/2.jpg","cat":2},{"name":"尿不湿","key":"尿不湿","icon":"/uview/common/classify/8/3.jpg","cat":2"cat":2},{"name":"安抚⽛胶","key":"安抚⽛胶","icon":"/uview/common/classify/8/4.jpg","cat":2},{"name":"奶瓶奶嘴","key":"奶瓶奶嘴","icon":"/uview/common/classify/8/5.jpg","cat":2},{"name":"孕妈⽤品","key":"孕妈⽤品","icon":"/uview/common/classify/8/6.jpg","cat":2},{"name":"宝宝⽤品","key":"宝宝⽤品","icon":"/uview/common/classify/8/7.jpg","cat":2},{"name":"婴童湿⼱","key":"湿⼱","icon":"/uview/common/classify/8/8.jpg","cat":2},{"name":"喂养洗护","key":"洗护","icon":"/uview/common/classify/8/9.jpg","cat":2},{"name":"婴童鞋靴","key":"童鞋","icon":"/uview/common/classify/8/10.jpg","cat":2},{"name":"⼝⽔⼱","key":"⼝⽔⼱","icon":"/uview/common/classify/8/11.jpg","cat":2},{"name":"营养辅⾷","key":"营养","icon":"/uview/common/classify/8/12.jpg","cat":2},{"name":"婴幼书籍","key":"书籍","icon":"/uview/common/classify/8/13.jpg","cat":2},{"name":"婴⼉车","key":"婴⼉车","icon":"/uview/common/classify/8/14.jpg","icon":"/uview/common/classify/8/14.jpg","cat":2}]},{"name":"箱包","foods":[{"name":"单肩包","key":"单肩包","icon":"/uview/common/classify/9/1.jpg","cat":0},{"name":"斜挎包","key":"斜挎包","icon":"/uview/common/classify/9/2.jpg","cat":0},{"name":"⼥包","key":"⼥包","icon":"/uview/common/classify/9/3.jpg","cat":0},{"name":"男包","key":"男包","icon":"/uview/common/classify/9/4.jpg","cat":0},{"name":"双肩包","key":"双肩包","icon":"/uview/common/classify/9/5.jpg","cat":0},{"name":"⼩⽅包","key":"⼩⽅包","icon":"/uview/common/classify/9/6.jpg","cat":0},{"name":"钱包","key":"钱包","icon":"/uview/common/classify/9/7.jpg","cat":0},{"name":"旅⾏箱包","key":"旅⾏箱包","icon":"/uview/common/classify/9/8.jpg","cat":0},{"name":"零钱包","key":"零钱包","icon":"/uview/common/classify/9/9.jpg","cat":0},{"name":"⼿提包","key":"⼿提包","icon":"/uview/common/classify/9/10.jpg","icon":"/uview/common/classify/9/10.jpg","cat":0},{"name":"胸包","key":"胸包","icon":"/uview/common/classify/9/11.jpg","cat":0}]},{"name":"内⾐","foods":[{"name":"袜⼦","key":"袜⼦","icon":"/uview/common/classify/10/1.jpg","cat":11},{"name":"吊带背⼼","key":"吊带背⼼","icon":"/uview/common/classify/10/2.jpg","cat":11},{"name":"抹胸","key":"抹胸","icon":"/uview/common/classify/10/3.jpg","cat":11},{"name":"内裤","key":"内裤","icon":"/uview/common/classify/10/4.jpg","cat":11},{"name":"⽂胸","key":"⽂胸","icon":"/uview/common/classify/10/5.jpg","cat":11},{"name":"⽂胸套装","key":"⽂胸套装","icon":"/uview/common/classify/10/6.jpg","cat":11},{"name":"打底塑⾝","key":"打底塑⾝","icon":"/uview/common/classify/10/7.jpg","cat":11},{"name":"家居服","key":"家居服","icon":"/uview/common/classify/10/8.jpg","cat":11},{"name":"船袜","key":"船袜","icon":"/uview/common/classify/10/9.jpg","icon":"/uview/common/classify/10/9.jpg","cat":11},{"name":"情侣睡⾐","key":"情侣睡⾐","icon":"/uview/common/classify/10/10.jpg","cat":11},{"name":"丝袜","key":"丝袜","icon":"/uview/common/classify/10/11.jpg","cat":11}]},{"name":"⽂娱车品","foods":[{"name":"车市车品","key":"车市车品","icon":"/uview/common/classify/11/1.jpg","cat":7},{"name":"办公⽂具","key":"办公⽂具","icon":"/uview/common/classify/11/2.jpg","cat":7},{"name":"考试必备","key":"考试必备","icon":"/uview/common/classify/11/3.jpg","cat":7},{"name":"笔记本","key":"笔记本","icon":"/uview/common/classify/11/4.jpg","cat":7},{"name":"艺术礼品","key":"礼品","icon":"/uview/common/classify/11/5.jpg","cat":7},{"name":"书写⼯具","key":"书写⼯具","icon":"/uview/common/classify/11/6.jpg","cat":7},{"name":"车载电器","key":"车载电器","icon":"/uview/common/classify/11/7.jpg","cat":7},{"name":"图书⾳像","key":"图书⾳像","icon":"/uview/common/classify/11/8.jpg","icon":"/uview/common/classify/11/8.jpg","cat":7},{"name":"画具画材","key":"画具画材","icon":"/uview/common/classify/11/9.jpg","cat":7}]},{"name":"配饰","foods":[{"name":"太阳镜","key":"太阳镜","icon":"/uview/common/classify/12/1.jpg","cat":0},{"name":"⽪带","key":"⽪带","icon":"/uview/common/classify/12/2.jpg","cat":0},{"name":"棒球帽","key":"棒球帽","icon":"/uview/common/classify/12/3.jpg","cat":0},{"name":"⼿表","key":"⼿表","icon":"/uview/common/classify/12/4.jpg","cat":0},{"name":"发饰","key":"发饰","icon":"/uview/common/classify/12/5.jpg","cat":0},{"name":"项链","key":"项链","icon":"/uview/common/classify/12/6.jpg","cat":0},{"name":"⼿饰","key":"⼿饰","icon":"/uview/common/classify/12/7.jpg","cat":0},{"name":"⽿环","key":"⽿环","icon":"/uview/common/classify/12/8.jpg","cat":0},{"name":"帽⼦丝⼱","key":"帽⼦丝⼱","icon":"/uview/common/classify/12/9.jpg","icon":"/uview/common/classify/12/9.jpg","cat":0},{"name":"眼镜墨镜","key":"