先看下静态效果图
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轴偏移量，根据实际情况看要不要设置
}
结束！！！！
不懂的私信加我，一起交流
