（饿了么商家点餐页面Vue实战项目）better scroll实现后发现的问题：手机端右边商品栏滑动到底左边菜单栏超出屏幕隐藏菜单部分不显示

本文链接：https://blog.csdn.net/zZ_Terry25/article/details/107230537

在Vue实战项目中，使用better-scroll时遇到手机端右侧商品栏滚动到底，左侧菜单栏隐藏部分不显示的问题。解决方案是通过在菜单项li上添加特殊class，并在计算高亮菜单时使用scrollToElement方法，同步滚动到对应菜单，从而解决隐藏菜单不显示的故障。

摘要由CSDN通过智能技术生成

具体问题描述：
手机端当右边商品滚动到对应最后一个菜单“特色粥品”（超出屏幕长度隐藏的菜单），左边对应菜单栏仍隐藏不可见。如下图：
问题展示图 解决办法：
仿照点击菜单项右边商品栏滚动到对应位置的方法：
（1）在li的class添加menu-list-hook，该class没有具体的样式，用于在JS中获取对象。
（2）在计算高亮菜单项处添加scrollToElement，使左边菜单栏随之滚动到对应的菜单项。
更改后解决该问题。

商品页面goods.vue代码：

<template>
    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
          <ul>
              <li v-for="(item,index) in goods" :key="index" class="menu-item menu-list-hook" @click="selectMenu(index, $event)" :class="{'current':currentIndex===index}">
                  <span class="text border-1px">
                      <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{
   {
   item.name}}
                  </span>
              </li>
          </ul>
      </div>
      <div class="foods-wrapper" ref="foodsWrapper">
        <ul>
          <li v-for="(item, index) in goods" class="food-list food-list-hook" :key="index">
            <h1 class="title">{
   {
   item.name}}</h1>
            <ul>
              <li v-for="(food,index) in item.foods" :key="index" class="food-item border-1px">
                <div class="icon">
                  <img :src="food.icon" width="57px" height="57px">
                </div>
                <div class="content">
                  <h2 class="name">{
   {
   food.name}}</h2>
                  <p class="desc">{
   {
   food.description}}</p>
                  <div class="extra">
                    <span>月售{
   <