react里面的楼梯效果

一、整体思路就是滚动时判断标题距离顶部的距离是否大于滚动高度赋值act，点击时触发scrillIntoView()页面滚动到指定位置

二、scrolllntoView的属性

scrollIntoView（{behavior: 'smooth', //顺滑的滚动block: 'center', //容器上下的中间inline: 'start', //容器左右的左边
}）

三、涉及到的技术栈
react、antd-mobile、react-router-dom、axios
四、数据结构处理

{"seller": {"name": "粥品香坊（回龙观）","description": "蜂鸟专送","deliveryTime": 38,"score": 4.2,"serviceScore": 4.1,"foodScore": 4.3,"rankRate": 69.2,"minPrice": 20,"deliveryPrice": 4,"ratingCount": 24,"sellCount": 90,"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。","supports": [{"type": 0,"description": "在线支付满28减5"},{"type": 1,"description": "VC无限橙果汁全场8折"},{"type": 2,"description": "单人精彩套餐"},{"type": 3,"description": "该商家支持发票,请下单写好发票抬头"},{"type": 4,"description": "已加入“外卖保”计划,食品安全保障"}],"avatar": "//static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg","pics": ["//fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180","//fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180","//fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180","//fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"],"infos": ["该商家支持发票,请下单写好发票抬头","品类:其他菜系,包子粥店","北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340","营业时间:10:00-20:30"]},"goods": [{"name": "热销榜","type": -1,"foods": [{"name": "皮蛋瘦肉粥","price": 10,"oldPrice": "","description": "","sellCount": 229,"rating": 100,"info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "很喜欢的粥","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "扁豆焖面","price": 14,"oldPrice": "","description": "","sellCount": 188,"rating": 96,"ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"info": "","icon": "//fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "葱花饼","price": 10,"oldPrice": "","description": "","sellCount": 124,"rating": 85,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 1,"text": "没啥味道","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 1,"text": "很一般啊","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "牛肉馅饼","price": 14,"oldPrice": "","description": "","sellCount": 114,"rating": 91,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 1,"text": "难吃不推荐","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "招牌猪肉白菜锅贴/10个","price": 17,"oldPrice": "","description": "","sellCount": 101,"rating": 78,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 1,"text": "不脆,不好吃","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "南瓜粥","price": 9,"oldPrice": "","description": "甜粥","sellCount": 91,"rating": 100,"ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "红豆薏米美肤粥","price": 12,"oldPrice": "","description": "甜粥","sellCount": 86,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "八宝酱菜","price": 4,"oldPrice": "","description": "","sellCount": 84,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "红枣山药糙米粥","price": 10,"oldPrice": "","description": "","sellCount": 81,"rating": 91,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "糊塌子","price": 10,"oldPrice": "","description": "","sellCount": 80,"rating": 93,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "单人精彩套餐","type": 2,"foods": [{"name": "红枣山药粥套餐","price": 29,"oldPrice": 36,"description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注","sellCount": 17,"rating": 100,"info": "","ratings": [{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "冰爽饮品限时特惠","type": 1,"foods": [{"name": "VC无限橙果汁","price": 8,"oldPrice": 10,"description": "","sellCount": 15,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "还可以","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "精选热菜","type": -1,"foods": [{"name": "娃娃菜炖豆腐","price": 17,"oldPrice": "","description": "","sellCount": 43,"rating": 92,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "菜量还可以,味道还可以","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "手撕包菜","price": 16,"oldPrice": "","description": "","sellCount": 29,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "香酥黄金鱼/3条","price": 11,"oldPrice": "","description": "","sellCount": 15,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "爽口凉菜","type": -1,"foods": [{"name": "八宝酱菜","price": 4,"oldPrice": "","description": "","sellCount": 84,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "拍黄瓜","price": 9,"oldPrice": "","description": "","sellCount": 28,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "精选套餐","type": -1,"foods": [{"name": "红豆薏米粥套餐","price": 37,"oldPrice": "","description": "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜","sellCount": 3,"rating": 100,"info": "","ratings": [{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "皮蛋瘦肉粥套餐","price": 31,"oldPrice": "","description": "","sellCount": 12,"rating": 100,"info": "","ratings": [{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "果拼果汁","type": -1,"foods": [{"name": "蜜瓜圣女萝莉杯","price": 6,"oldPrice": "","description": "","sellCount": 1,"rating": "","info": "","ratings": [],"icon": "//fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "加多宝","price": 6,"oldPrice": "","description": "","sellCount": 7,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "VC无限橙果汁","price": 8,"oldPrice": 10,"description": "","sellCount": 15,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "还可以","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "小吃主食","type": -1,"foods": [{"name": "扁豆焖面","price": 14,"oldPrice": "","description": "","sellCount": 188,"rating": 96,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "葱花饼","price": 10,"oldPrice": "","description": "","sellCount": 124,"rating": 85,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 1,"text": "没啥味道","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 1,"text": "很一般啊","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "牛肉馅饼","price": 14,"oldPrice": "","description": "","sellCount": 114,"rating": 91,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 1,"text": "难吃不推荐","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "招牌猪肉白菜锅贴/10个","price": 17,"oldPrice": "","description": "","sellCount": 101,"rating": 78,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 1,"text": "不脆,不好吃","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "糊塌子","price": 10,"oldPrice": "","description": "","sellCount": 80,"rating": 93,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"}]},{"name": "特色粥品","type": -1,"foods": [{"name": "皮蛋瘦肉粥","price": 10,"oldPrice": "","description": "咸粥","sellCount": 229,"rating": 100,"ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "很喜欢的粥","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "南瓜粥","price": 9,"oldPrice": "","description": "甜粥","sellCount": 91,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "红豆薏米美肤粥","price": 12,"oldPrice": "","description": "甜粥","sellCount": 86,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "红枣山药糙米粥","price": 10,"oldPrice": "","description": "","sellCount": 81,"rating": 91,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "鲜蔬菌菇粥","price": 11,"oldPrice": "","description": "咸粥","sellCount": 56,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": ""},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750"},{"name": "田园蔬菜粥","price": 10,"oldPrice": "","description": "咸粥","sellCount": 33,"rating": 100,"info": "","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "2******3","rateTime": 1469271264000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"},{"username": "3******b","rateTime": 1469261964000,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png"}],"icon": "//fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114","image": "//fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750"}]}],"ratings": [{"username": "3******c","rateTime": 1469281964000,"deliveryTime": 30,"score": 5,"rateType": 0,"text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": ["南瓜粥","皮蛋瘦肉粥","扁豆焖面","娃娃菜炖豆腐","牛肉馅饼"]},{"username": "2******3","rateTime": 1469271264000,"deliveryTime": "","score": 4,"rateType": 0,"deliveryTime": "","text": "服务态度不错","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": ["扁豆焖面"]},{"username": "3******b","rateTime": 1469261964000,"score": 3,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "1******c","rateTime": 1469261864000,"deliveryTime": 20,"score": 5,"rateType": 0,"text": "良心店铺","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "2******d","rateTime": 1469251264000,"deliveryTime": 10,"score": 4,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "9******0","rateTime": 1469241964000,"deliveryTime": 70,"score": 1,"rateType": 1,"text": "送货速度蜗牛一样","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "d******c","rateTime": 1469231964000,"deliveryTime": 30,"score": 5,"rateType": 0,"text": "很喜欢的粥店","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "2******3","rateTime": 1469221264000,"deliveryTime": "","score": 4,"rateType": 0,"text": "量给的还可以","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "3******8","rateTime": 1469211964000,"deliveryTime": "","score": 3,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "a******a","rateTime": 1469201964000,"deliveryTime": "","score": 4,"rateType": 0,"text": "孩子喜欢吃这家","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": ["南瓜粥"]},{"username": "3******3","rateTime": 1469191264000,"deliveryTime": "","score": 4,"rateType": 0,"text": "粥挺好吃的","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "t******b","rateTime": 1469181964000,"deliveryTime": "","score": 3,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "f******c","rateTime": 1469171964000,"deliveryTime": 15,"score": 5,"rateType": 0,"text": "送货速度很快","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "k******3","rateTime": 1469161264000,"deliveryTime": "","score": 4,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "u******b","rateTime": 1469151964000,"deliveryTime": "","score": 4,"rateType": 0,"text": "下雨天给快递小哥点个赞","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "s******c","rateTime": 1469141964000,"deliveryTime": "","score": 4,"rateType": 0,"text": "好","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "z******3","rateTime": 1469131264000,"deliveryTime": "","score": 5,"rateType": 0,"text": "吃了还想再吃","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "n******b","rateTime": 1469121964000,"deliveryTime": "","score": 3,"rateType": 1,"text": "发票开的不对","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "m******c","rateTime": 1469111964000,"deliveryTime": 30,"score": 5,"rateType": 0,"text": "好吃","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "l******3","rateTime": 1469101264000,"deliveryTime": 40,"score": 5,"rateType": 0,"text": "还不错吧","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "3******o","rateTime": 1469091964000,"deliveryTime": "","score": 2,"rateType": 1,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "3******p","rateTime": 1469081964000,"deliveryTime": "","score": 4,"rateType": 0,"text": "很喜欢的粥","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "o******k","rateTime": 1469071264000,"deliveryTime": "","score": 5,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []},{"username": "k******b","rateTime": 1469061964000,"deliveryTime": "","score": 4,"rateType": 0,"text": "","avatar": "//static.galileo.xiaojukeji.com/static/tms/default_header.png","recommend": []}]
}

五、前端页面框架

 <div className='list'><Header /><Tabs style={{"--active-title-color": "orange"}}><Tabs.Tab title='商品' key='fruits'><div className="box"><div className="menu-wrapper"><ul>{menuList.length > 0 && menuList.map((item, index) => (<li className={act === index ? 'active' : ''} onClick={() => FnTable(index)} key={index}><span className="text border-1px"><span style={item.type > 0 ? {} : { display: 'none' }}></span>{item.name}                                    </span></li>))}</ul></div><div className="floor-list" ref={leftItem} >{menuList.map((floor, index) => (<div key={index} className="floor-item" id={`floor-${index}`}><div className="img"><span>{floor.name}</span></div><div className="tp">{floor.foods.map((food, idx) => (<div className='fot_id' key={idx}><div className="icon"><img width="57" height="57" src={food.icon} /></div><div className="content"><h2 className="name">{food.name}</h2><p className="desc">{food.description}</p><div className="extra"><span className="count">月售{food.sellCount}份</span><span>好评率{food.rating}%</span></div><div className="price"><span className="now">￥{food.price}</span><span className='old' style={food.oldPrice ? {} : { display: 'none' }}>￥{food.oldPrice}</span></div><button onClick={(e) => {Fnstart(e)}}>+</button></div></div>))}</div></div>))}</div></div></Tabs.Tab><Tabs.Tab title='评价' key='vegetables'><Rates /></Tabs.Tab><Tabs.Tab title='商家' key='animals'>商家</Tabs.Tab></Tabs><div className="footer" ref={collect}><div className="left"><Badge content={total[1]}><div className={styles.box}><TruckOutline fontSize={"40px"} /></div></Badge><span style={{ marginRight: "10px" }}>￥{total[0]}</span><span>另需配送费4元</span></div><div className="right"><button style={{ background: total[1] > 0 ? "green" : "#e3e3e3" }}>去结算</button></div></div></div >

六、sass代码

.list{width: 100vw;height: calc(100% - 103px);.box{height: 100%;display: flex;// align-items: center;.menu-wrapper{width: 35%;height: 400px;overflow: hidden;ul{list-style: none;li{height: 40px;line-height: 40px;}.active{background: antiquewhite;color: white;font-weight: bold;}}}.floor-list{height: 300px;overflow: auto;-ms-overflow-style: none;/* IE 10+ */overflow: -moz-scrollbars-none;/* Firefox */.fot_id{display: flex;}}}.footer{width: 100vw;background-color: skyblue;position: fixed;bottom: 0;display: flex;justify-content: space-between;align-items: center;.left{padding-left: 10px;display: flex;align-items: center;}.right{button{width: 100px;height: 40px;background: #e3e3e3;color: white;border: none;border-radius: 3px;}}}#ball{width: 20;height: 20;border-radius: 50%;background-color: blue;position: absolute;}
}

七、具体实现思路

  const navigate = useNavigate()//左侧列表const [menuList, setMenuList] = useState([])//右侧数据// const [scrollPositions, setScrollPositions] = useState([]);//存储下标const [act, setAct] = useState(0)//根据下标取出数组中对应下标的ScrollTop值 就让右边的scrollTop维数组中取出的值const leftItem = useRef(null)var [num, setNum] = useState(0)//渲染完成获取每一个列表距离顶部的距离useEffect(() => {//获取数据getGoods();//监听滚动变化leftItem.current.addEventListener("scroll", FnScroll)}, [])//获取数据const getGoods = async () => {const { data } = await axios.get('data.json')setMenuList([...data.goods])}//点击切换位置const FnTable = (index) => {setAct(index);// console.log(activeIndex);scrollToFloor(index);};const scrollToFloor = (index) => {const floorElement = document.getElementById(`floor-${index}`);// console.log(floorElement);if (floorElement) {floorElement.scrollIntoView({ behavior: 'smooth' });}};//滚动切换位置const FnScroll = () => {//滚动高度const scrollTop = leftItem.current.scrollTopconst floorItems = document.getElementsByClassName('floor-item');//标题距离页面顶部距离的数组const positions = Array.from(floorItems).map((item) => item.offsetTop);const act = positions.findIndex(val => val > scrollTop)console.log(act)setAct(act === -1 ? positions.length - 1 : act);};

react里面的楼梯效果相关推荐

Taro(React)实现具有滚动效果的倒数计时器
Taro(React)实现具有滚动效果的倒数计时器 Taro获取节点方法的封装 import Taro from "@tarojs/taro"; import { NodesRef ...
使用jq实现电商网站“楼梯”效果制作（左侧显示楼层号、显示对应楼层信息）
使用jq实现电商网站"楼梯"效果制作思路 : 1.点击左侧的楼层号显示对应的楼层信息操作当前点击的楼层号的高亮显示点击不同楼层号设置页面滚走的距离为当前楼层距离内容窗口 ...
教你用jquery实现网页的楼梯效果
教你用jquery实现网页的楼梯效果在各大电商网站中经常看到如图所示右边的楼梯效果,当我们滚动页面滚动道不同的分栏的时候,右边的提示框相应的也会发生变化,并且点击提示框上的不同按钮,可以跳转到对应的 ...
rax+react hook 实现分页效果
'use strict'; import { createElement, useState, useEffect, memo } from 'rax'; import View from 'rax- ...
19.React Native动画Animated效果三种动画类型二；
目录 1.介绍 2.Animated.decay() 2.1方法 2.1.1value参数值 2.1.2config参数有以下这些属性: 2.2示例-执行缩放 2.2.1初始化缩放值 2.2.2绑定缩 ...
unity 自动寻路爬楼梯效果
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.AI; ...
React中实现插槽效果的方案
文章目录 React实现插槽 children实现插槽 props实现插槽 React实现插槽在开发中,我们抽取了一个组件,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的di ...
原生js实现京东商城楼梯效果
这个可能有些兼容问题和小bug,新手写的不完善欢迎指出 <!DOCTYPE html> <html> <head><title></title& ...
【React 基础】之 React 基本介绍、jsx 规则、模块与组件
React 全家桶 React 基础 React-Router 路由 PubSub + 消息管理库 Redux 集中式的状态管理 Ant-Design UI 组件库 - React 简介官网英文官 ...

react里面的楼梯效果

react里面的楼梯效果相关推荐

最新文章

热门文章