左联右

<!-- 左 菜品分类--><view class="order-left"><scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true":show-scrollbar="false"><block v-for="(item,index) in categoryList" :key="index"><view class="itemize-text" :class="{active: index == trigger}"@click="itemIze(index,item.id)"><text class="order_value">{{item.name}}</text></view></block></scroll-view></view>

data定义变量trigger，添加动态class，

scroll_into: '', //值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

在点击左侧菜单的时候给trigger赋值，完成右侧商品的滑动

// 点击左侧菜品分类加上背景色itemIze(index, id) {// console.log('点击左侧',index,id)this.trigger = indexthis.scroll_into = 'a' + index// console.log('id不能为数字',this.scroll_into)setTimeout(() => {this.scroll_into = ''}, 200)},

 右联左

 这里的id就是关联左联右，class类名在计算菜单分类高度会用到

计算左侧菜单分类高度

注意：这里需要设置一个延时器，因为一开始进来页面加载完毕左侧调用函数时可能会失败未加载完成，所以需要延时器

// 计算右边每个分类菜品的高度goodsHeight() {setTimeout(()=>{let cate_height = 0const query = uni.createSelectorQuery()// console.log('节点信息', query)query.selectAll('.rig-height').boundingClientRect()query.exec((res) => {// console.log('节点信息下的res', res)res[0].forEach((item) => {// console.log('res[0]的item', item)cate_height += item.heightthis.heightArr.push(cate_height)// console.log('菜品的高度', this.heightArr)})this.exist = false})},1000)},

右边商品滚动时触发

scroLl(e) {// console.log('右边菜品滚动时触发e',e)let scrollTop = e.detail.scrollTop;// console.log('右边触发scrollTope',scrollTop)let scrollArr = this.heightArr;// console.log('右侧高度',scrollArr)if (scrollTop >= scrollArr[scrollArr.length - 1] -this.pageHeight) {console.log('return')return} else {for (let i = 0; i < scrollArr.length; i++) {if (scrollTop >= 0 && scrollTop < scrollArr[0]) {// console.log('0个')this.scroll_into = 'a0'this.trigger = 0} else if (scrollTop >= scrollArr[i-1] && scrollTop < scrollArr[i]) {// console.log('下一个',i)this.scroll_into = "a"+ithis.trigger = i// console.log('下一个i',this.scroll_into)}}}},

到这里基本就已经完成了右联左