小牛点餐

生活消费外卖案例ID：174324

不吃葡萄哪来的葡萄皮

3 年经验· 开封某国企

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

1.从页面来分，分为头部和内容区。其中头部包括展示的那部分和一个浮层。内容区包括评价页，商品页和商家详情页。
2.项目所做的是SPA单页面应用，所以切换子页面时，不会去刷新整个页面。
3.对于头部，当我们点击公告和上面的数字时，需要展示黑色浮层(最后一张图片)，浮层上有关闭按钮，点击按钮，浮层关闭。
4.对于内容区，最复杂的是商品页，商品页拆分为左右两栏，左侧是商品的分类，右侧是商品的实际列表。当实际商品的展示区是哪个分类时，对应左侧的分类高亮显示。当左右两侧内容超过可视区域时，两边都可以滚动。注意：当滚动右侧内容区，左侧对应的列表也要保持联动的效果。当右侧快速滚动时，左侧也要保持联动的效果。这样实现一个外卖app的体验。(将这个滚动当做一个技术难点)
5.页面底部是一个购物车，当我们点击加号，即购买某个商品时候，购物车会自动，联动购买的商品总数和金额这两部分。当金额超过最小配送费(比如20元起送)时，右下角展示区结算的按钮，可以点击该按钮进行结算。当购物车数量为0时，点击购物车没反应，当购物车数量不为0时，点击购物车时，会显示购物车列表。再点击购物车，该列表会隐藏。其中购物车列表也有最大高度，超过最大高度时，内部也可以滚动。在购物车列表内部，也可以完成购买流程，其中在内部点击按钮改变商品数量时，内容页的也会有联动的效果。