vue利用better-scroll插件实现分类页左右联动效果并实现点击左侧,滚动右侧

先看下静态效果图
image.png
实现的效果是滑动右侧,左侧跟随实际高度滚动
实现点击左侧,右侧滚动到指定位置

废话不多说,直接上代码,分步骤:

先上DOM,这里用到了vant的tabs和sidebar

 <!-- tab -->
    <van-tabs v-model="active" sticky color='#2395ff' line-width='25'>
      <van-tab title="点餐">
        <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="评价">评价 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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
              "rating": {
                "comment_count": 4,
                "title": "外卖评价",
                "snd_title": "4条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "#奶油坚果酱中套餐#不好吃。还是奥尔良,麦辣鸡腿那些最经典的汉堡好吃。薯条软得不能再软了。我备注了可乐换芬达也没有换。#麦辣鸡翅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块#送错"
                  }
                ]
              }
            }, {
              "id": 151783280,
              "name": "经典麦辣鸡腿汉堡中薯套餐",
              "min_price": 29,
              "praise_num": 11,
              "praise_content": "赞11",
              "tread_num": 1,
              "praise_num_new": 11,
              "unit": "个",
              "description": "1个经典麦辣鸡腿汉堡 1份薯条(中) 1杯可口可乐(中)",
              "picture": "http://p1.meituan.net/xianfu/7d8678b48687b91e478be0f0c1f4c8e1361240.png",
              "month_saled": 608,
              "month_saled_content": "月售608",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 6,
                "title": "外卖评价",
                "snd_title": "6条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "91%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用户",
                    "comment_time": "2017.09.07",
                    "comment_unix_time": 1504775663,
                    "comment_content": "#小食纷享盒(含鸡排)##麦辣鸡腿汉堡中套餐##蜜汁柠檬风味那么大鸡翅#"
                  }, {
                    "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 5,
                "title": "外卖评价",
                "snd_title": "5条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用户",
                    "comment_time": "2017.09.24",
                    "comment_unix_time": 1506185729,
                    "comment_content": "麦当劳死忠粉!挚爱麦乐鸡和辣翅"
                  }, {
                    "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 11,
                "title": "外卖评价",
                "snd_title": "11条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "https://img.meituan.net/avatar/7ad80904126baabba33ea41024cd545b21530.jpg",
                    "user_name": "張弓長",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食纷享盒A(含薯条就酱)##麦辣鸡翅4块##经典麦辣鸡腿汉堡#送餐有点慢"
                  }, {
                    "user_icon": "",
                    "user_name": "GDq177157764",
                    "comment_time": "2017.09.28",
                    "comment_unix_time": 1506612877,
                    "comment_content": " 鸡翅感觉味道不是很好,包装薯条可以用小袋子装好。有点散落"
                  }
                ]
              }
            }, {
              "id": 96985052,
              "name": "经典麦辣鸡腿汉堡",
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 16,
                "title": "外卖评价",
                "snd_title": "16条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "張弓長",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食纷享盒A(含薯条就酱)##麦辣鸡翅4块##经典麦辣鸡腿汉堡#送餐有点慢"
                  }
                ]
              }
            }, {
              "id": 110713378,
              "name": "原味板烧鸡腿堡中薯套餐",
              "min_price": 30,
              "praise_num": 4,
              "praise_content": "赞4",
              "tread_num": 0,
              "praise_num_new": 4,
              "unit": "个",
              "description": "1个原味板烧鸡腿堡 1份薯条(中) 1杯可口可乐(中)",
              "picture": "http://p1.meituan.net/xianfu/71f534915c7763796729a1d9721fb1f1389269.png",
              "month_saled": 337,
              "month_saled_content": "月售337",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 2,
                "title": "外卖评价",
                "snd_title": "2条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 221795394,
              "name": "薯条(大)",
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 1,
                "title": "外卖评价",
                "snd_title": "1条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "匿名用户",
                    "comment_time": "2017.09.16",
                    "comment_unix_time": 1505537589,
                    "comment_content": "#薯条(大)##不素之霸双层牛肉堡精选套餐#两份薯条全软了"
                  }
                ]
              }
            }, {
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 4,
                "title": "外卖评价",
                "snd_title": "4条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "https://img.meituan.net/avatar/7ad80904126baabba33ea41024cd545b21530.jpg",
                    "user_name": "張弓長",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食纷享盒A(含薯条就酱)##麦辣鸡翅4块##经典麦辣鸡腿汉堡#送餐有点慢"
                  }, {
                    "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": "优品豆浆(大)",
              "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": "外卖评价",
                "snd_title": "4条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": [
                  {
                    "user_icon": "",
                    "user_name": "Dic685222804",
                    "comment_time": "2017.08.22",
                    "comment_unix_time": 1503367854,
                    "comment_content": "速度快。全烫手,服务态度好,😊 就是 少了杯大豆浆,整体不错"
                  }, {
                    "user_icon": "https://img.meituan.net/avatar/657cbe0dad0fdb4cef2992015b0634808303.jpg",
                    "user_name": "小巫爱",
                    "comment_time": "2017.08.18",
                    "comment_unix_time": 1503024935,
                    "comment_content": "豆浆口味还可以,包装太难拆了"
                  }
                ]
              }
            }, {
              "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": "外卖评价",
                "snd_title": "1条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "#原味板烧鸡腿麦满分配脆薯饼#这个挺#金馒头#都好吃,就是金馒头有点儿硬有没特殊情况,慢吞吞的,预定时间过了,我催了两次都没送来"
                  }
                ]
              }
            }, {
              "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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "description": "1个猪柳麦满分 1个脆薯饼 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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438865919,
              "name": "栗子风味优品豆浆(大)",
              "min_price": 12,
              "praise_num": 0,
              "praise_content": "赞0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "例",
              "description": "大杯栗子豆浆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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "description": "1个火腿扒蛋麦煎饼 1个脆薯饼 1杯优品豆浆(大)",
              "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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "description": "1个油条培根蛋麦煎饼 1个脆薯饼 1杯优品豆浆(大)",
              "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": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }
          ]
        }, {
          "name": "促销产品和热卖产品",
          "icon": "",
          "spus": [
            {
              "id": 438870237,
              "name": "拉蒙鲜脆纯牛堡",
              "min_price": 28,
              "praise_num": 2,
              "praise_content": "赞2",
              "tread_num": 0,
              "praise_num_new": 2,
              "unit": "例",
              "description": "拉蒙鲜脆纯牛堡1个",
              "picture": "http://p0.meituan.net/xianfu/d21c8f8f4ce2aaa45018a3a80e92745d1581483.jpg",
              "month_saled": 29,
              "month_saled_content": "月售29",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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个",
              "picture": "http://p0.meituan.net/xianfu/05db2e2e2ac23770897033b452a67ff2305715.jpg",
              "month_saled": 32,
              "month_saled_content": "月售32",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "description": "霆锋酷辣鸡腿堡1个 大可乐1杯 大薯条1份",
              "picture": "http://p0.meituan.net/xianfu/1753ceba8b48c980e54491f98fdd0358341000.jpg",
              "month_saled": 27,
              "month_saled_content": "月售27",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 1,
                "title": "外卖评价",
                "snd_title": "1条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "description": "麦乐鸡7块 香骨鸡腿3个 麦辣鸡翅6块 中可乐2杯",
              "picture": "http://p1.meituan.net/xianfu/4f7707edf2fd2caf687d200028140292120643.jpg",
              "month_saled": 23,
              "month_saled_content": "月售23",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438870076,
              "name": "可口派1个",
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438902521,
              "name": "可口派2个",
              "min_price": 13.5,
              "praise_num": 3,
              "praise_content": "赞3",
              "tread_num": 0,
              "praise_num_new": 3,
              "unit": "个",
              "description": "可口派2个",
              "picture": "http://p0.meituan.net/xianfu/cf8181f0a3e20ec38f6e8b56d4cf2a401586678.jpg",
              "month_saled": 43,
              "month_saled_content": "月售43",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 438849280,
              "name": "海盐柠檬苏打风味汽水",
              "min_price": 11.5,
              "praise_num": 0,
              "praise_content": "赞0",
              "tread_num": 0,
              "praise_num_new": 0,
              "unit": "例",
              "description": "海盐柠檬苏打风味汽水1杯",
              "picture": "http://p0.meituan.net/xianfu/e52f46a35ac3637929be444e82a8ba031440068.jpg",
              "month_saled": 17,
              "month_saled_content": "月售17",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "薯条就酱田园芥末蜂蜜风味1份 那么大鸡排1份 麦乐鸡4块",
              "picture": "http://p0.meituan.net/xianfu/34a0b07c3e9cd27577fad6f35f24d6341608364.jpg",
              "month_saled": 24,
              "month_saled_content": "月售24",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "个",
              "description": "麦辣鸡腿堡2个 板烧鸡腿堡2个 巨无霸1个 麦乐鸡20块 麦辣鸡翅9块 那么大鸡排1份 小玉米2份 菠萝派2个 香芋派2个 中可乐3杯 美汁源阳光橙2杯",
              "picture": "http://p0.meituan.net/xianfu/efc8f6ce851689fc71fc66f102e75963145780.jpg",
              "month_saled": 4,
              "month_saled_content": "月售4",
              "status": 3,
              "status_description": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 2,
                "title": "外卖评价",
                "snd_title": "2条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "#培根蔬萃双层牛堡#个人不喜欢吃吧 其它都好"
                  }
                ]
              }
            }, {
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "like_ratio": "100%",
                "filter_type": 1,
                "comment_list": []
              }
            }, {
              "id": 96985052,
              "name": "经典麦辣鸡腿汉堡",
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 16,
                "title": "外卖评价",
                "snd_title": "16条评论",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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": "張弓長",
                    "comment_time": "2017.10.06",
                    "comment_unix_time": 1507300695,
                    "comment_content": "#小食纷享盒A(含薯条就酱)##麦辣鸡翅4块##经典麦辣鸡腿汉堡#送餐有点慢"
                  }
                ]
              }
            }, {
              "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": "非可售时间",
              "product_label_picture": "",
              "rating": {
                "comment_count": 0,
                "title": "外卖评价",
                "snd_title": "暂无",
                "praise_friends": "",
                "like_ratio_desc": "好评度",
                "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;
            /* 超出部分显示省略号*/
            -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;
}

左侧右侧先来实现独立滚动

第一步,定义一个方法 initScroll,data内新建两个对象 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时才会派发scroll事件
        click: true
      })
}

第二步,在mounted里面调用该方法

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

这样,就实现了左右独立滑动,下面来看如何实现左右联动

第一步,定义一个方法

calulateHeight(){
  
}

第二步 ,在合适的地方调用这个方法,我是在mounted里面

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

第三步,获取到每个分类li元素,
第四步,把所有li元素的可视高度进行一个累加,放进一个数组里,ps:没有数组,需要在data里定义一个空数组listHeight:[]

calulateHeight(){
  let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
   // console.log(foodlist)  //控制台输出
  //第四步,把所有li元素的可视高度进行一个累加,放进一个数组里,ps:没有数组,需要在data里定义一个空数组listHeight:[]
  //在第四步的基础上,先定义一个变量height,最顶部的位置,为0
   let height = 0
  //然后 把当前的位置高度push进刚刚定义的数组里去
    this.listHeight.push(height)
  //然后需要遍历一下刚刚拿到的li元素,即:foodlist
    foodlist.forEach((item) => {
        // console.log(item);
        //把每一个li元素的可视高度进行一个累加 即:clientHeight
        height += item.clientHeight
        // console.log(height);
        //这个时候把每一个li的可视高度都放进listHeight数组里
        this.listHeight.push(height) //至此,第四步完成
      })
      //console.log(this.listHeight) //这时候如果姿势对的话,会打印出所有li的累加可视高度

}

第五步,在 initScroll 方法内 foodScroll 添加监听事件on,获取到y轴滚动的高度

initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuScroll, {
        click: true
      })
      this.foodScroll = new BScroll(this.$refs.foodScroll, {
        probeType: 3,
        click: true
      })
      //第五步,foodScroll 添加监听事件on,获取到y轴滚动的高度      vx:1115009958
      this.foodScroll.on("scroll", pos => {
        //console.log(pos.y) //会打印出y轴坐标,会出现负数以及小数,不是我们想要的
        //第六步,在data内定义一个初始值 scrollY:0      ps:y轴滚动的高度
        //第七步,对得到的pos.y 进行取绝对值Math.abs和取整数Math.round,并赋与scrollY
        this.scrollY = Math.abs(Math.round(pos.y))
        //console.log(this.scrollY) //姿势正确的话会得到整数 和 正数
        //我们既然可以拿到scrollY滚动的值,之后呢,
        //我们就可以去遍历一下我们刚刚获取到的listHeight的这个数组里面的所有的区间 ,
        //再使用区间跟我们刚刚获取到的这个scrollY滚动的值做对比,如果当前的区间在这个里面的话,
        //那我们就会生成一个 对应的下标
        //第八步,遍历一下我们刚刚获取到的listHeight的这个数组里面的所有的区间高度
        this.listHeight.forEach((item, i) => {
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]
          //是否在上述区间高度中 ps:用滚动的值scrollY和height1,height2做对比,
          //如果scrollY大于等于height1并且小于height2,就说明 i 在该区间内了,然后就把i返回,即得到下标
          if ((this.scrollY >= height1 && this.scrollY < height2)) {
            // 最后把得到的下标赋值给左侧,即实现想要的效果了
            this.activeKey = i
          }
        })

      })
    },

实现点击左侧,右侧实时滚动
给左侧分类列表 绑定一个@click事件,并把index值传递过来

selectMenu(index) {
      //console.log(index)//会得到下标值
      //这里的下标值和右边的listheight的下标值对应上
      //首先先获取右侧的元素 foodlist
      let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
      //获取到具体的元素,意识是第i个foodlist 
      let element = foodlist[index]
      //console.log(element) //点击哪个分类就会得到对应的foodlist
      //滚动到对应的元素的位置  调用better-scroll提供的一个方法 scrollToElement(详情请自行百度)
      this.foodScroll.scrollToElement(element, 250, 0, -25) //250是滚动所花费的时间 0 -25 是x y轴偏移量,根据实际情况看要不要设置
    }

结束!!!!

不懂的私信加我,一起交流

禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容