茶叶分类：左右联动（点击左侧菜单，右侧自动滚动到对应位置）

注意：使用better-scroll，点击事件默认是关闭的，要设置：click 为 true

  官方方文档：https://better-scroll.github.io/docs-v1/doc/zh-hans/options.html#dblclickv1120
      this.$nextTick(() => {
            new BScroll(".wrapper", {
              click: true, // 将clcik设置为true 
            });
          });
          
          

前端：

   点击左边让右边联动思路：
       0 点击左边事件，并传入下标
       1 右侧滚动高度获取方式：
           1.1 通过获取到每个ul后是一个伪数组 ，
           1.2 使用Array.from() 转换为真正的数组后，通过循环获取每个ul的高度 并累加后 添加到一个空的数组里 
           1.3利用better-scroll 插件的scrollTo(x, y, time, easing)方法：直接滚动到获取到的高度值 
           1.4参考插件方法使用搜索scrollTo方法查看：https://better-scroll.github.io/docs-v1/doc/zh-hans/api.html#refresh
   <template>
  <div class="section">
    <div class="l-menu">
      <div class="wrapper">
        <ul>
          <li
            v-for="(item,index) in menuList"
            :key="index"
            @click="clickLeftMenu(index)"
          >{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div class="r-menu">
      <div class="wrapper-menu">
        <div ref="scrolls">
          <ul
            class="recommend"
            ref="ulrecommend"
            v-for="(item,index) in recommendInfo"
            :key="index"
          >
            <li v-for="(k,i) in item" :key="i">
              <div>{{k.title}}</div>
              <ul class="Tea">
                <li v-for="(s,idxs) in k.list" :key="idxs">
                  <img :src="s.imgUrl" alt />
                  <div>{{s.title}}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/common/api/request.js";
// 引入插件
import BScroll from "better-scroll";
export default {
  data() {
    return {
      menuList: [],
      recommendInfo: [],
      wrapper_menu: "",
      scrollHeight: [],
    };
  },

  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await http.$axios({
        url: "/api/goods/list",
      });

      let menuList = [];
      let recommendInfo = [];
      //   console.log(res);
      res.forEach((i) => {
        menuList.push({
          id: i.id,
          title: i.title,
        });
        recommendInfo.push(i.data);
      });
      this.menuList = menuList;
      this.recommendInfo = recommendInfo;

      // 左侧滚动
      this.$nextTick(() => {
        new BScroll(".wrapper", {
          click: true,
          pullUpLoad: true,
          scrollbar: true,
          pullDownRefresh: true,
        });
      });

      // 右侧滚动的
      this.$nextTick(() => {
        this.wrapper_menu = new BScroll(".wrapper-menu", {
          pullUpLoad: true,
          scrollbar: true,
          pullDownRefresh: true,
        });

        // 右侧滚动的距离
        let height = 0;
        this.scrollHeight.push(height);

        // 获取右侧每一个ul的dom元素
        let uls = this.$refs.ulrecommend;
        // 装伪数组转换为真正的数组,然后获取每一个ul的dom元素的高度
        Array.from(uls).forEach((i) => {
          //   console.log(i.clientHeight);
          // 获取每个ul的高度 并累加后 添加到一个空的数组里
          height += i.clientHeight;
          this.scrollHeight.push(height);
        });

        // console.log(height);
        // console.log(uls);
        // console.log(this.scrollHeight);
      });
    },
    clickLeftMenu(index) {
      console.log(index);
      //   获取滚动的dom元素
      //   点击的时候，让右侧ul滚动距离等于 右侧scrollHeight数组中 对应数组下标的值
      console.log(this.$refs.scrolls);
      this.wrapper_menu.scrollTo(0, -this.scrollHeight[index], 300);
    },
  },
};
</script>



<style lang="less" scoped>
.section {
  display: flex;
  position: fixed;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
  //   overflow: hidden;
  .l-menu {
    // height: 15.4rem;
    border-right: 1px solid #cccccc;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //   flex: 1;
      li {
        font-size: 0.48rem;
        margin: 0.266667rem;
      }
    }
    ul li::before {
      content: "";
      position: absolute;
      display: inline-block;
      width: 1px;
      height: 20px;
      //   text-align: left;
      background-color: red;
    }
  }

  .r-menu {
    .wrapper-menu {
      height: 35vh;
    }
    flex: 1;
    .recommend {
      display: flex;
      flex-direction: column;
      .Tea {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0.533333rem 0.533333rem;
        flex: 1;

        li {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          width: 2rem;
          height: 2rem;
          margin: 0.133333rem;
          div {
            font-size: 0.373333rem;
          }
          img {
            width: 1.413333rem;
            height: 1.413333rem;
          }
        }
      }
    }
    .recommend li > div {
      margin: 0.266667rem;
      font-size: 0.48rem;
      text-align: center;
    }
  }
}
</style>