先看下靜態(tài)效果圖

image.png

實(shí)現(xiàn)的效果是滑動(dòng)右側(cè)横堡，左側(cè)跟隨實(shí)際高度滾動(dòng)

實(shí)現(xiàn)點(diǎn)擊左側(cè)，右側(cè)滾動(dòng)到指定位置

廢話不多說胸蛛，直接上代碼，分步驟：

先上DOM，這里用到了vant的tabs和sidebar

 <!-- tab -->
    <van-tabs v-model="active" sticky color='#2395ff' line-width='25'>
      <van-tab title="點(diǎn)餐">
        <div class="contents" :style="obj">
          <!-- 分類列表 -->
          <div class="menu-wrapper" ref="menuScroll">
            <van-sidebar v-model="activeKey">
              <van-sidebar-item :title="item.name" v-for="(item,index) in goods" :key="index" @click="selectMenu(index)" />
            </van-sidebar>
          </div>
          <!-- 商品列表 -->
          <div class="foods-wrapper" ref="foodScroll">
            <ul>
              <!-- 具體分類 -->
              <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
                <h3 class="title">{{item.name}}</h3>

                <!-- 具體的商品列表 -->
                <ul>
                  <li v-for="(food,index) in item.spus" :key="index" @click="showDetail(food)" class="food-item">
                    <div class="icon" :style="head_bg(food.picture)"></div>
                    <div class="content">
                      <h3 class="name">{{food.name}}</h3>
                      <p class="desc" v-if="food.description">{{food.description}}</p>
                      <div class="extra">
                        <span class="saled">{{food.month_saled_content}}</span>
                        <span class="praise">{{food.praise_content}}</span>
                      </div>
                      <p class="price">
                        <span class="text">￥{{food.min_price}}</span>
                        <span>
                          <van-icon name="add" @click.stop="hanldeAdd(food)" color="#2396ff" size="24" />
                        </span>
                      </p>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="評(píng)價(jià)">評(píng)價(jià) 2</van-tab>
      <van-tab title="商家">商家 3</van-tab>
    </van-tabs>

data() {
    return {
      activeKey: 0,
      active: 0,
      obj: {
        height: ''
      },
      goods: [
        {
          "name": "熱銷",
          "icon": "http://p1.meituan.net/xianfu/10ba72e043ef4eca806cafb1a90a22662048.png",
          "spus": [
            {
              "id": 216599656,
              "name": "脆香油條",
              "min_price": 5.5,
              "praise_num": 3,
              "praise_content": "贊3",
              "tread_num": 0,
              "praise_num_new": 3,
              "unit": "例",
              "description": "",
              "picture": "https://cube.elemecdn.com/0/f5/df7d06f23c7651c011534d219a561jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_210,h_210/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp  ",
              "month_saled": 154,
              "month_saled_content": "月售154",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 96985579,
              "name": "麥辣雞翅2塊",
              "min_price": 11,
              "praise_num": 22,
              "praise_content": "贊22",
              "tread_num": 0,
              "praise_num_new": 22,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png",
              "month_saled": 948,
              "month_saled_content": "月售948",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
              "rating": {
                "comment_count": 4,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "4條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "https://img.meituan.net/avatar/71ef89fa000e783d5b8d86c2767a9d28195580.jpg",
                    "user_name": "ejX309524666",
                    "comment_time": "2017.08.31",
                    "comment_unix_time": 1504161290,
                    "comment_content": "#奶油堅(jiān)果醬中套餐#不好吃。還是奧爾良身坐，麥辣雞腿那些最經(jīng)典的漢堡好吃涯鲁。薯?xiàng)l軟得不能再軟了崇败。我備注了可樂換芬達(dá)也沒有換岸霹。#麥辣雞翅2塊#就還好，里面的肉挺嫩的坠七，很入味拳魁。"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/6571c42526237b0118f437418e989d1187445.jpg",
                    "user_name": "EAG789830055",
                    "comment_time": "2017.08.18",
                    "comment_unix_time": 1503030166,
                    "comment_content": "#麥辣雞翅2塊#送錯(cuò)"
                  }
                ]
              }
            }, {
              "id": 151783280,
              "name": "經(jīng)典麥辣雞腿漢堡中薯套餐",
              "min_price": 29,
              "praise_num": 11,
              "praise_content": "贊11",
              "tread_num": 1,
              "praise_num_new": 11,
              "unit": "個(gè)",
              "description": "1個(gè)經(jīng)典麥辣雞腿漢堡 1份薯?xiàng)l(中) 1杯可口可樂(中)",
              "picture": "http://p1.meituan.net/xianfu/7d8678b48687b91e478be0f0c1f4c8e1361240.png",
              "month_saled": 608,
              "month_saled_content": "月售608",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 6,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "6條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "91%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.09.07",
                    "comment_unix_time": 1504775663,
                    "comment_content": "#小食紛享盒（含雞排）##麥辣雞腿漢堡中套餐##蜜汁檸檬風(fēng)味那么大雞翅#"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/4df07741b8a7c4bd69ab72097eb8ed5a23369.jpg",
                    "user_name": "無1139",
                    "comment_time": "2017.08.15",
                    "comment_unix_time": 1502779026,
                    "comment_content": "#麥辣雞腿漢堡中套餐#好吃"
                  }
                ]
              }
            }, {
              "id": 96985580,
              "name": "麥樂雞5塊",
              "min_price": 11,
              "praise_num": 15,
              "praise_content": "贊15",
              "tread_num": 0,
              "praise_num_new": 15,
              "unit": "例",
              "description": "5塊麥樂雞",
              "picture": "http://p1.meituan.net/xianfu/d8aa381c66769f43d76582ea65f8ef59231885.png",
              "month_saled": 515,
              "month_saled_content": "月售515",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 5,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "5條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.09.24",
                    "comment_unix_time": 1506185729,
                    "comment_content": "麥當(dāng)勞死忠粉擎淤！摯愛麥樂雞和辣翅"
                  }, {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.09.01",
                    "comment_unix_time": 1504278628,
                    "comment_content": "番茄醬一包沒給，麥樂雞的酸甜醬也沒給姑曙！哎"
                  }
                ]
              }
            }, {
              "id": 96985585,
              "name": "麥辣雞翅4塊",
              "min_price": 22,
              "praise_num": 7,
              "praise_content": "贊7",
              "tread_num": 0,
              "praise_num_new": 7,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/416b9ebd6b13d45b39cac9f7a21967ba234597.png",
              "month_saled": 402,
              "month_saled_content": "月售402",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 11,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "11條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "https://img.meituan.net/avatar/7ad80904126baabba33ea41024cd545b21530.jpg",
                    "user_name": "張弓長(zhǎng)",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食紛享盒A（含薯?xiàng)l就醬）##麥辣雞翅4塊##經(jīng)典麥辣雞腿漢堡#送餐有點(diǎn)慢"
                  }, {
                    "user_icon": "",
                    "user_name": "GDq177157764",
                    "comment_time": "2017.09.28",
                    "comment_unix_time": 1506612877,
                    "comment_content": " 雞翅感覺味道不是很好贞言，包裝薯?xiàng)l可以用小袋子裝好。有點(diǎn)散落"
                  }
                ]
              }
            }, {
              "id": 96985052,
              "name": "經(jīng)典麥辣雞腿漢堡",
              "min_price": 17,
              "praise_num": 9,
              "praise_content": "贊9",
              "tread_num": 0,
              "praise_num_new": 9,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/549f44bcf8326227d355aa3539ebd52f340133.png",
              "month_saled": 371,
              "month_saled_content": "月售371",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 16,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "16條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.10.12",
                    "comment_unix_time": 1507814453,
                    "comment_content": "好吃#霆鋒酷辣雞腿堡大薯套餐#"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/7ad80904126baabba33ea41024cd545b21530.jpg",
                    "user_name": "張弓長(zhǎng)",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食紛享盒A（含薯?xiàng)l就醬）##麥辣雞翅4塊##經(jīng)典麥辣雞腿漢堡#送餐有點(diǎn)慢"
                  }
                ]
              }
            }, {
              "id": 110713378,
              "name": "原味板燒雞腿堡中薯套餐",
              "min_price": 30,
              "praise_num": 4,
              "praise_content": "贊4",
              "tread_num": 0,
              "praise_num_new": 4,
              "unit": "個(gè)",
              "description": "1個(gè)原味板燒雞腿堡 1份薯?xiàng)l(中) 1杯可口可樂(中)",
              "picture": "http://p1.meituan.net/xianfu/71f534915c7763796729a1d9721fb1f1389269.png",
              "month_saled": 337,
              "month_saled_content": "月售337",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 2,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "2條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.08.22",
                    "comment_unix_time": 1503408334,
                    "comment_content": "縮小了嗎#原味板燒雞腿堡中套餐#"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/41aaa02a7ef43eb09dd6cc404e06990023891.jpg",
                    "user_name": "kong2185",
                    "comment_time": "2017.07.22",
                    "comment_unix_time": 1500708113,
                    "comment_content": "雞腿好辣嗷不過味道可以"
                  }
                ]
              }
            }, {
              "id": 96985036,
              "name": "原味板燒雞腿堡",
              "min_price": 18,
              "praise_num": 5,
              "praise_content": "贊5",
              "tread_num": 0,
              "praise_num_new": 5,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/11d12a87c1a7aa58fa677c7b966b6594323357.png",
              "month_saled": 263,
              "month_saled_content": "月售263",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 221795394,
              "name": "薯?xiàng)l（大）",
              "min_price": 12,
              "praise_num": 4,
              "praise_content": "贊4",
              "tread_num": 0,
              "praise_num_new": 4,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/af31248c3489ed58435de3f88f1ee09d235371.png",
              "month_saled": 231,
              "month_saled_content": "月售231",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 1,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "1條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.09.16",
                    "comment_unix_time": 1505537589,
                    "comment_content": "#薯?xiàng)l（大）##不素之霸雙層牛肉堡精選套餐#兩份薯?xiàng)l全軟了"
                  }
                ]
              }
            }, {
              "id": 96985064,
              "name": "香骨雞腿",
              "min_price": 12,
              "praise_num": 6,
              "praise_content": "贊6",
              "tread_num": 0,
              "praise_num_new": 6,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/e2bc458aec29f590dca898919077d839237268.png",
              "month_saled": 207,
              "month_saled_content": "月售207",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 4,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "4條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "https://img.meituan.net/avatar/7ad80904126baabba33ea41024cd545b21530.jpg",
                    "user_name": "張弓長(zhǎng)",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食紛享盒A（含薯?xiàng)l就醬）##麥辣雞翅4塊##經(jīng)典麥辣雞腿漢堡#送餐有點(diǎn)慢"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/41aaa02a7ef43eb09dd6cc404e06990023891.jpg",
                    "user_name": "kong2185",
                    "comment_time": "2017.07.22",
                    "comment_unix_time": 1500708113,
                    "comment_content": "雞腿好辣嗷不過味道可以"
                  }
                ]
              }
            }
          ]
        }, {
          "name": "早餐",
          "icon": "",
          "spus": [
            {
              "id": 216597252,
              "name": "優(yōu)品豆?jié){（大）",
              "min_price": 11,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/15da864a97ac5b19127b9038df46eb4c155078.png",
              "month_saled": 74,
              "month_saled_content": "月售74",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 4,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "4條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "Dic685222804",
                    "comment_time": "2017.08.22",
                    "comment_unix_time": 1503367854,
                    "comment_content": "速度快。全燙手，服務(wù)態(tài)度好，?? 就是 少了杯大豆?jié){痒玩，整體不錯(cuò)"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/657cbe0dad0fdb4cef2992015b0634808303.jpg",
                    "user_name": "小巫愛",
                    "comment_time": "2017.08.18",
                    "comment_unix_time": 1503024935,
                    "comment_content": "豆?jié){口味還可以践啄，包裝太難拆了"
                  }
                ]
              }
            }, {
              "id": 216599462,
              "name": "金饅頭",
              "min_price": 5,
              "praise_num": 1,
              "praise_content": "贊1",
              "tread_num": 0,
              "praise_num_new": 1,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/0fbd3c2773c621157e170cdb2ada929b170852.png",
              "month_saled": 48,
              "month_saled_content": "月售48",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 1,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "1條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "https://img.meituan.net/avatar/8244f1577095cb691764ff9e0ce0570813916.jpg",
                    "user_name": "xinwer123456789",
                    "comment_time": "2017.06.01",
                    "comment_unix_time": 1496295028,
                    "comment_content": "#原味板燒雞腿麥滿分配脆薯餅#這個(gè)挺#金饅頭#都好吃烂完，就是金饅頭有點(diǎn)兒硬有沒特殊情況嘶窄，慢吞吞的漓拾，預(yù)定時(shí)間過了哟旗，我催了兩次都沒送來"
                  }
                ]
              }
            }, {
              "id": 216599656,
              "name": "脆香油條",
              "min_price": 5.5,
              "praise_num": 3,
              "praise_content": "贊3",
              "tread_num": 0,
              "praise_num_new": 3,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/35f41c0badc69352b886cc34080f1f9a232448.png",
              "month_saled": 154,
              "month_saled_content": "月售154",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 216588956,
              "name": "脆薯餅",
              "min_price": 5,
              "praise_num": 2,
              "praise_content": "贊2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "個(gè)",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/fe598e97b9bc4e08d9dfec5c2c9180d3179470.png",
              "month_saled": 107,
              "month_saled_content": "月售107",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 216599288,
              "name": "豬柳麥滿分配脆薯餅",
              "min_price": 18.5,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "個(gè)",
              "description": "1個(gè)豬柳麥滿分 1個(gè)脆薯餅 1杯鮮煮咖啡（大杯）",
              "picture": "http://p0.meituan.net/xianfu/e7219fd5ed8254b545247684b2cc5d5c14217.jpg",
              "month_saled": 99,
              "month_saled_content": "月售99",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 216600508,
              "name": "板燒雞腿早晨全餐配鮮煮咖啡",
              "min_price": 28,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "個(gè)",
              "description": "1份板燒雞腿早晨全餐 1杯鮮煮咖啡（大）",
              "picture": "http://p1.meituan.net/xianfu/0ca1c0a3c485cc09e18598c5566ee9f5345618.png",
              "month_saled": 41,
              "month_saled_content": "月售41",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438865919,
              "name": "栗子風(fēng)味優(yōu)品豆?jié){（大）",
              "min_price": 12,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "例",
              "description": "大杯栗子豆?jié){1杯",
              "picture": "http://p0.meituan.net/xianfu/59d78c6b0080b108a14c3c5895ceadd635378.jpg",
              "month_saled": 10,
              "month_saled_content": "月售10",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 216588917,
              "name": "火腿扒蛋麥煎餅配脆薯餅",
              "min_price": 21,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "個(gè)",
              "description": "1個(gè)火腿扒蛋麥煎餅 1個(gè)脆薯餅 1杯優(yōu)品豆?jié){（大）",
              "picture": "http://p1.meituan.net/xianfu/6aa38967bc35763ec79ba18c16bf61df322968.png",
              "month_saled": 38,
              "month_saled_content": "月售38",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 216600219,
              "name": "油條培根蛋麥煎餅配脆薯餅",
              "min_price": 22,
              "praise_num": 2,
              "praise_content": "贊2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "個(gè)",
              "description": "1個(gè)油條培根蛋麥煎餅 1個(gè)脆薯餅 1杯優(yōu)品豆?jié){（大）",
              "picture": "http://p1.meituan.net/xianfu/57d025b20ae30ffd90a30bd688050850269856.png",
              "month_saled": 29,
              "month_saled_content": "月售29",
              "status": 0,
              "status_description": "",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }
          ]
        }, {
          "name": "促銷產(chǎn)品和熱賣產(chǎn)品",
          "icon": "",
          "spus": [
            {
              "id": 438870237,
              "name": "拉蒙鮮脆純牛堡",
              "min_price": 28,
              "praise_num": 2,
              "praise_content": "贊2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "例",
              "description": "拉蒙鮮脆純牛堡1個(gè)",
              "picture": "http://p0.meituan.net/xianfu/d21c8f8f4ce2aaa45018a3a80e92745d1581483.jpg",
              "month_saled": 29,
              "month_saled_content": "月售29",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438863406,
              "name": "霆鋒酷辣雞腿堡",
              "min_price": 28,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 1,
              "praise_num_new": 0,
              "unit": "例",
              "description": "霆鋒酷辣雞腿堡1個(gè)",
              "picture": "http://p0.meituan.net/xianfu/05db2e2e2ac23770897033b452a67ff2305715.jpg",
              "month_saled": 32,
              "month_saled_content": "月售32",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "0%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438902255,
              "name": "霆鋒酷辣雞腿堡大薯套餐",
              "min_price": 44,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "個(gè)",
              "description": "霆鋒酷辣雞腿堡1個(gè) 大可樂1杯 大薯?xiàng)l1份",
              "picture": "http://p0.meituan.net/xianfu/1753ceba8b48c980e54491f98fdd0358341000.jpg",
              "month_saled": 27,
              "month_saled_content": "月售27",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 1,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "1條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.10.12",
                    "comment_unix_time": 1507814453,
                    "comment_content": "好吃#霆鋒酷辣雞腿堡大薯套餐#"
                  }
                ]
              }
            }, {
              "id": 96986070,
              "name": "麥趣雞盒（含麥樂雞）",
              "min_price": 89,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "個(gè)",
              "description": "麥樂雞7塊 香骨雞腿3個(gè) 麥辣雞翅6塊 中可樂2杯",
              "picture": "http://p1.meituan.net/xianfu/4f7707edf2fd2caf687d200028140292120643.jpg",
              "month_saled": 23,
              "month_saled_content": "月售23",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438870076,
              "name": "可口派1個(gè)",
              "min_price": 8.5,
              "praise_num": 1,
              "praise_content": "贊1",
              "tread_num": 0,
              "praise_num_new": 1,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/d32dcf3dd572f516fa45a8323dca61b41519619.jpg",
              "month_saled": 35,
              "month_saled_content": "月售35",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438902521,
              "name": "可口派2個(gè)",
              "min_price": 13.5,
              "praise_num": 3,
              "praise_content": "贊3",
              "tread_num": 0,
              "praise_num_new": 3,
              "unit": "個(gè)",
              "description": "可口派2個(gè)",
              "picture": "http://p0.meituan.net/xianfu/cf8181f0a3e20ec38f6e8b56d4cf2a401586678.jpg",
              "month_saled": 43,
              "month_saled_content": "月售43",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438849280,
              "name": "海鹽檸檬蘇打風(fēng)味汽水",
              "min_price": 11.5,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "例",
              "description": "海鹽檸檬蘇打風(fēng)味汽水1杯",
              "picture": "http://p0.meituan.net/xianfu/e52f46a35ac3637929be444e82a8ba031440068.jpg",
              "month_saled": 17,
              "month_saled_content": "月售17",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438870185,
              "name": "小食紛享盒A",
              "min_price": 30,
              "praise_num": 2,
              "praise_content": "贊2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "例",
              "description": "薯?xiàng)l就醬田園芥末蜂蜜風(fēng)味1份 那么大雞排1份 麥樂雞4塊",
              "picture": "http://p0.meituan.net/xianfu/34a0b07c3e9cd27577fad6f35f24d6341608364.jpg",
              "month_saled": 24,
              "month_saled_content": "月售24",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 234806439,
              "name": "5人歡享盛宴餐",
              "min_price": 199,
              "praise_num": 0,
              "praise_content": "贊0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "個(gè)",
              "description": "麥辣雞腿堡2個(gè) 板燒雞腿堡2個(gè) 巨無霸1個(gè) 麥樂雞20塊 麥辣雞翅9塊 那么大雞排1份 小玉米2份 菠蘿派2個(gè) 香芋派2個(gè) 中可樂3杯 美汁源陽(yáng)光橙2杯",
              "picture": "http://p0.meituan.net/xianfu/efc8f6ce851689fc71fc66f102e75963145780.jpg",
              "month_saled": 4,
              "month_saled_content": "月售4",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }
          ]
        }, {
          "name": "主食",
          "icon": "",
          "spus": [
            {
              "id": 96985036,
              "name": "原味板燒雞腿堡",
              "min_price": 18,
              "praise_num": 5,
              "praise_content": "贊5",
              "tread_num": 0,
              "praise_num_new": 5,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/11d12a87c1a7aa58fa677c7b966b6594323357.png",
              "month_saled": 263,
              "month_saled_content": "月售263",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 96985590,
              "name": "巨無霸",
              "min_price": 20,
              "praise_num": 2,
              "praise_content": "贊2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/bea403c55f25302e3a342e2ce68d1673479937.png",
              "month_saled": 79,
              "month_saled_content": "月售79",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 96985057,
              "name": "培根蔬萃雙層牛堡",
              "min_price": 21,
              "praise_num": 1,
              "praise_content": "贊1",
              "tread_num": 1,
              "praise_num_new": 1,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/8bdfa160293b923cfbd50e2a90c6b8e9127708.jpg",
              "month_saled": 37,
              "month_saled_content": "月售37",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 2,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "2條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "50%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "tNr607465983",
                    "comment_time": "2017.09.22",
                    "comment_unix_time": 1506053859,
                    "comment_content": "培根#培根蔬萃雙層牛堡# 沒有牛肉"
                  }, {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.05.04",
                    "comment_unix_time": 1493889572,
                    "comment_content": "#培根蔬萃雙層牛堡#個(gè)人不喜歡吃吧 其它都好"
                  }
                ]
              }
            }, {
              "id": 96985032,
              "name": "麥香雞",
              "min_price": 11,
              "praise_num": 4,
              "praise_content": "贊4",
              "tread_num": 0,
              "praise_num_new": 4,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/85ce1f49ad8b5420d7a21067d274110c303543.png",
              "month_saled": 86,
              "month_saled_content": "月售86",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 195834403,
              "name": "漢堡包",
              "min_price": 7.5,
              "praise_num": 1,
              "praise_content": "贊1",
              "tread_num": 0,
              "praise_num_new": 1,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/2464c58bb059694acd717269ec112750238375.png",
              "month_saled": 57,
              "month_saled_content": "月售57",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 238544154,
              "name": "不素之霸雙層牛肉堡",
              "min_price": 21,
              "praise_num": 2,
              "praise_content": "贊2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "例",
              "description": "",
              "picture": "http://p1.meituan.net/xianfu/6f8868b72f259c225fa3b66c597a325485367.jpg",
              "month_saled": 50,
              "month_saled_content": "月售50",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 96985052,
              "name": "經(jīng)典麥辣雞腿漢堡",
              "min_price": 17,
              "praise_num": 9,
              "praise_content": "贊9",
              "tread_num": 0,
              "praise_num_new": 9,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/549f44bcf8326227d355aa3539ebd52f340133.png",
              "month_saled": 371,
              "month_saled_content": "月售371",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 16,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "16條評(píng)論",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用戶",
                    "comment_time": "2017.10.12",
                    "comment_unix_time": 1507814453,
                    "comment_content": "好吃#霆鋒酷辣雞腿堡大薯套餐#"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/7ad80904126baabba33ea41024cd545b21530.jpg",
                    "user_name": "張弓長(zhǎng)",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食紛享盒A（含薯?xiàng)l就醬）##麥辣雞翅4塊##經(jīng)典麥辣雞腿漢堡#送餐有點(diǎn)慢"
                  }
                ]
              }
            }, {
              "id": 384784834,
              "name": "蜜汁雞腿滿碗飯",
              "min_price": 23,
              "praise_num": 1,
              "praise_content": "贊1",
              "tread_num": 0,
              "praise_num_new": 1,
              "unit": "例",
              "description": "",
              "picture": "http://p0.meituan.net/xianfu/6284d37a9e54269fd0400efa02d5c90a285459.png",
              "month_saled": 20,
              "month_saled_content": "月售20",
              "status": 3,
              "status_description": "非可售時(shí)間",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外賣評(píng)價(jià)",
                "snd_title": "暫無",
                "praise_friends": "",
                "like_ratio_desc": "好評(píng)度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }
          ]
        }
      ],
    }
  },

css

.contents {
  display: flex;
  .menu-wrapper {
    flex: 0 0 80px;
    overflow: hidden;
  }
  .foods-wrapper {
    flex: 1;
    // background: yellow;
    overflow: hidden;
    .food-list {
      padding: 10px;
      .title {
        font-size: 14px;
        // background: url(./img/btn_yellow_highlighted@2x.png) no-repeat left center;
        background-size: 2px 10px;
        margin-bottom: 12px;
      }
      .food-item {
        display: flex;
        margin-bottom: 25px;
        position: relative;
        .icon {
          flex: 0 0 75px;
          background-position: center;
          background-size: 120% 100%;
          background-repeat: no-repeat;
          margin-right: 11px;
          height: 75px;
        }
        .content {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-size: 16px;
            color: #333333;
            margin-bottom: 10px;
            padding-right: 27px;
            margin: 0;
          }
          .desc {
            font-size: 10px;
            color: #bfbfbf;
            /* 超出部分顯示省略號(hào)*/
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            width: 80%;
            margin: 5px 0;
          }
          .extra {
            font-size: 10px;
            color: #bfbfbf;
            margin-bottom: 5px;
            .saled {
              margin-right: 14px;
            }
          }
          .price {
            font-size: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
            .text {
              font-size: 15px;
              color: #ff5339;
            }
          }
        }
      }
    }
  }
}
::v-deep .van-sidebar {
  overflow: hidden;
}
::v-deep .van-sidebar-item__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

左側(cè)右側(cè)先來實(shí)現(xiàn)獨(dú)立滾動(dòng)

第一步屹电，定義一個(gè)方法 initScroll牧愁，data內(nèi)新建兩個(gè)對(duì)象 menuScroll 猪半，foodScroll磨确，頂部引入 import BScroll from 'better-scroll'

data(){
  return{
      menuScroll:{ },
      foodScroll:{ }
  }
}

initScroll(){
     this.menuScroll = new BScroll(this.$refs.menuScroll, {
        click: true
      })
      this.foodScroll = new BScroll(this.$refs.foodScroll, {
        probeType: 3,// probeType為3時(shí)才會(huì)派發(fā)scroll事件
        click: true
      })
}

第二步，在mounted里面調(diào)用該方法

this.$nextTick(() => {
    this.initScroll()
 })

這樣邓了，就實(shí)現(xiàn)了左右獨(dú)立滑動(dòng),下面來看如何實(shí)現(xiàn)左右聯(lián)動(dòng)

第一步骗炉，定義一個(gè)方法

calulateHeight(){
  
}

第二步 ,在合適的地方調(diào)用這個(gè)方法，我是在mounted里面

 this.$nextTick(() => {
      this.obj.height = document.documentElement.clientHeight - this.$refs.bottomBar.clientHeight - 50 + 'px'
      console.log(this.obj.height);
      this.calulateHeight()
 })

第三步乍丈，獲取到每個(gè)分類li元素诗赌，
第四步铭若，把所有l(wèi)i元素的可視高度進(jìn)行一個(gè)累加，放進(jìn)一個(gè)數(shù)組里镜雨，ps：沒有數(shù)組荚坞，需要在data里定義一個(gè)空數(shù)組listHeight:[]

calulateHeight(){
  let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
   // console.log(foodlist)  //控制臺(tái)輸出
  //第四步颓影，把所有l(wèi)i元素的可視高度進(jìn)行一個(gè)累加碎浇，放進(jìn)一個(gè)數(shù)組里奴璃，ps：沒有數(shù)組，需要在data里定義一個(gè)空數(shù)組listHeight:[]
  //在第四步的基礎(chǔ)上雳旅，先定義一個(gè)變量height，最頂部的位置，為0
   let height = 0
  //然后 把當(dāng)前的位置高度push進(jìn)剛剛定義的數(shù)組里去
    this.listHeight.push(height)
  //然后需要遍歷一下剛剛拿到的li元素叹话，即：foodlist
    foodlist.forEach((item) => {
        // console.log(item);
        //把每一個(gè)li元素的可視高度進(jìn)行一個(gè)累加 即:clientHeight
        height += item.clientHeight
        // console.log(height);
        //這個(gè)時(shí)候把每一個(gè)li的可視高度都放進(jìn)listHeight數(shù)組里
        this.listHeight.push(height) //至此驼壶，第四步完成
      })
      //console.log(this.listHeight) //這時(shí)候如果姿勢(shì)對(duì)的話,會(huì)打印出所有l(wèi)i的累加可視高度

}

第五步，在 initScroll 方法內(nèi) foodScroll 添加監(jiān)聽事件on，獲取到y(tǒng)軸滾動(dòng)的高度

initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuScroll, {
        click: true
      })
      this.foodScroll = new BScroll(this.$refs.foodScroll, {
        probeType: 3,
        click: true
      })
      //第五步相速，foodScroll 添加監(jiān)聽事件on芜繁，獲取到y(tǒng)軸滾動(dòng)的高度      vx：1115009958
      this.foodScroll.on("scroll", pos => {
        //console.log(pos.y) //會(huì)打印出y軸坐標(biāo)骏令，會(huì)出現(xiàn)負(fù)數(shù)以及小數(shù)伏社，不是我們想要的
        //第六步聪黎，在data內(nèi)定義一個(gè)初始值 scrollY：0      ps：y軸滾動(dòng)的高度
        //第七步，對(duì)得到的pos.y 進(jìn)行取絕對(duì)值Math.abs和取整數(shù)Math.round,并賦與scrollY
        this.scrollY = Math.abs(Math.round(pos.y))
        //console.log(this.scrollY) //姿勢(shì)正確的話會(huì)得到整數(shù) 和 正數(shù)
        //我們既然可以拿到scrollY滾動(dòng)的值沉噩，之后呢昼牛，
        //我們就可以去遍歷一下我們剛剛獲取到的listHeight的這個(gè)數(shù)組里面的所有的區(qū)間 ，
        //再使用區(qū)間跟我們剛剛獲取到的這個(gè)scrollY滾動(dòng)的值做對(duì)比，如果當(dāng)前的區(qū)間在這個(gè)里面的話看彼，
        //那我們就會(huì)生成一個(gè) 對(duì)應(yīng)的下標(biāo)
        //第八步，遍歷一下我們剛剛獲取到的listHeight的這個(gè)數(shù)組里面的所有的區(qū)間高度
        this.listHeight.forEach((item, i) => {
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]
          //是否在上述區(qū)間高度中 ps:用滾動(dòng)的值scrollY和height1,height2做對(duì)比,
          //如果scrollY大于等于height1并且小于height2,就說明 i 在該區(qū)間內(nèi)了,然后就把i返回,即得到下標(biāo)
          if ((this.scrollY >= height1 && this.scrollY < height2)) {
            // 最后把得到的下標(biāo)賦值給左側(cè)，即實(shí)現(xiàn)想要的效果了
            this.activeKey = i
          }
        })

      })
    },

實(shí)現(xiàn)點(diǎn)擊左側(cè),右側(cè)實(shí)時(shí)滾動(dòng)
給左側(cè)分類列表 綁定一個(gè)@click事件,并把index值傳遞過來

selectMenu(index) {
      //console.log(index)//會(huì)得到下標(biāo)值
      //這里的下標(biāo)值和右邊的listheight的下標(biāo)值對(duì)應(yīng)上
      //首先先獲取右側(cè)的元素 foodlist
      let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
      //獲取到具體的元素,意識(shí)是第i個(gè)foodlist 
      let element = foodlist[index]
      //console.log(element) //點(diǎn)擊哪個(gè)分類就會(huì)得到對(duì)應(yīng)的foodlist
      //滾動(dòng)到對(duì)應(yīng)的元素的位置  調(diào)用better-scroll提供的一個(gè)方法 scrollToElement(詳情請(qǐng)自行百度)
      this.foodScroll.scrollToElement(element, 250, 0, -25) //250是滾動(dòng)所花費(fèi)的時(shí)間 0 -25 是x y軸偏移量，根據(jù)實(shí)際情況看要不要設(shè)置
    }

結(jié)束？⑻啊Ｇ妇臁Ｊ缂省！

不懂的私信加我盗胀，一起交流