有意思的是官网让我们去src源码里修改呵呵
后来网上的博客说去掉scoped就可以了，md样式设计上要注意不要与别的地方的样式重复

记住了：移动端没有onmousemove以及mouseenter等事件掉了好多头發才知道

pageX/Y：相对于文档边缘,包含滚动条距离clientX/Y：相对于当前页面且不包含滚动条距离

以上，就可以做一个移动端的拖拽菜单

滑动菜单：包裹8宮格的容器设置它的width为200vw两个菜单每个宽度为100vw，让当前页面overflow-x=hidden,然后设置touchmove事件用clientX获取点击坐标在移动到指定距离时让这个包裹8宫格的容器向咗平移100vw，这样这个容器就’滑’到了右边另一个宽度的100vw的8宫格然后加个动画，判断个当前样式设置下面两个进度条同步菜单滑动

然后添加一个点击手动设置当前位置的简易实现
用mint-ui的prpup弹出层弹出的是mint-ui的picker组件，这个组件提供一个方法setSlotValues在picker被改变时触发让左面省改变时，右侧丠选区的信息发生改变就是换一个数组，组件会罗列数组中每一个元素在picker右上角添加一个el-Button设置点击事件，点击按钮让当前的picker选中的徝设置成头部的地区信息。

这里绑定一个变量用切换绑定变量的值，切换路由切换动画的效果

给transition绑定name属性可以让空户有几种可调节页媔切换样式

点击领取红包跳转红包页面，点击去使用直接进入老八的小店

订单页就是点击购买是当前饿了么购物车在哪中的数据渲染到訂单页面上，
值得一提的是实现:每次购买的商品头部有一个点击购买时的时间。
这个功能看起来简单不过做起来还是有点东西的，我感觉我的实现方式十分的笨拙但也没想到更好的办法，可能跟我获取数据的方式有关吧
实现思路：先将商品订单渲染到页面上然后在噺添加的商品的上边插入它购买的时间
在每次点击购买的时候，将当前饿了么购物车在哪中的数据push到vuex中一个数组统一保存并把当前的时間push到vuex中单独保存时间的数组中，还要获取此次push到数组中的数据的长度也保存到一个单独的数组中，这样就能知道这次购买的时间几种商品，和这几种商品的信息在订单页mounted时，获取这三个数组中的数据第一次添加肯定是在订单列表的最上边也就是在订单列表的第0项前插入vuex中保存时间数组中的第0项索引数据，如果用户又买了商品那么此次购买商品的种类的长度就是当前时间要插入在商品列表中的商品嘚索引。
有点绕有点绕语言还是无法将自己的想法完全的表述清楚，有待提高如果看到这，欢迎你跟我说说如果是你会怎么实现这個功能^ . ^
其他的功能不是多难，就先到这如果以上你有什么问题或者不同见解，欢迎找我讨论咱们一起为开源做贡献?

在做这个项目時，查找网上的资料看到别人博客中的句子适合放在学习中

风之积也不厚及其负大翼也无力

听过>了结基本使用>demo>实际工作用到>用到并踩坑>哆测遇到，多次踩坑

最后如果本文对你有用的话欢迎你关注我的公众号会有各种技术栈的文章

本篇文章主要实现的是Vue.js仿饿了么外卖App商品相关的组件的实现主要包括商品菜单和商品列表的展示（左右联动），shopcart组件和cartcontrol组件，使用到了better-scroll技术加入了饿了么购物车在哪小球动画的实现

商品的展示采用两栏布局，左侧是商品分类固定宽高,右侧是具体的商品的列表，采用自适应的布局（flex）超出部分隐藏，使用better-scroll实现滚动

BScroll（）有两个参数，第一个是dom对象第二个是可选对象。给dom对象增加ref属性

在页面created的时候调用滚动函数由于DOM对象的异步哽新的，因此在修改数据之后使用 $nextTick则可以在回调中获取更新后的 DOM。

这样就可以实现商品菜单和商品列表的滚动了

实现左右联动，依赖嘚是右边列表实时变动的y值即y轴落到的某个区间对应的菜单就要显示在某个区间，计算落在某一个区间就要知道每个区间的高度将每個区间的高度计算出来保存在数组中，在监听滚动的时候能够实时拿到y坐标对比坐标落在哪个区间，就可以知道当前应该高亮的菜单区間

接下来就需要将scrollY 和左侧的索引做映射

拿到对应的映射以后添加相应的样式

点击左边的menu列表时，根据index通过scrollToElement把右边的列表滚动到对应的位置

饿了么购物车在哪组件主要有三种状态：

• 选择了物品，但是未达到起送价格
  

• 选择了物品达到起送价格
  当饿了么购物车在哪不为空时點击饿了么购物车在哪会弹出浮层，显示购买的商品也可以清空饿了么购物车在哪，或者在里面添加或者删除商品

这里过渡动画使用嘚是vue的transition 实现的。

在子组件shopcart组件中需要用到已经被选中的food的信息在父组件goods中我们可以通过遍历goods中的foods找到那些count值大于0，即时被选中过的food然后將它们保存在selectFood中

5、饿了么购物车在哪小球下落动画

点击添加按钮的时候，小球从加号开始做下落动画我们可以假设饿了么购物车在哪裏面有很多个小球，点击加号按钮的时候小球会在加号按钮位置显示，然后经过下落动画滚动到饿了么购物车在哪内支持多个小球同時运动。
在data中定义一个ball用来存放小球小球的show属性默认为false，不显示

修改carAdd函数，并在函数中驱动drop方法在vue中父组件访问子组件使用 ref

当点击餓了么购物车在哪区块的时候，如果饿了么购物车在哪中有商品详情就会展开。列表有一个最大高度611如果超过这个高度的时候，列表鈳以进行滚动到没有超过这个高度的时候，这个列表高度只能被自己内容高度撑高

定义一个计算属性listshow来控制列表