vue利用better |
您所在的位置：网站首页 › vant实现左右滑动 › vue利用better |
|
先看下静态效果图
image.png
实现的效果是滑动右侧，左侧跟随实际高度滚动
实现点击左侧，右侧滚动到指定位置
废话不多说，直接上代码，分步骤： 先上DOM，这里用到了vant的tabs和sidebar {{item.name}} {{food.name}}{{food.description}} {{food.month_saled_content}} {{food.praise_content}}¥{{food.min_price}} 评价 2 商家 3 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/[email protected]) 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轴偏移量，根据实际情况看要不要设置 }结束！！！！ 不懂的私信加我，一起交流 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |