Vue新技术栈重构黄老师饿了么商家应用总结

.food-picker{最小宽度：180px;最大宽度：200px；显示：弹性；对齐项目：居中；宽度：100%；证明内容：空格之间；.iconfont{颜色：#00a0dc；字体大小：38px；}.counter{//边距：020px；}}项目仓库地址：https://github.com/konglingwen94/vue-elm-sell项目在线地址：http://123.57.204.48:5000背景自从学了Vue，我就尽量用Vue实现能用Vue解决的用例。纯用例需求没有完整的项目开发流程，能从中学到的东西也很有限。在此之前，我除了用Vue做过vue-music手机音乐播放器项目和vue-bytedanceJob（改造一家独角兽互联网公司的官方招聘网站）外，并没有用Vue涉足过web端更复杂的业务。场景。为了找个项目实践，就去github上开始搜索。当我看到这个项目https://github.com/ustbhuangyi/vue-sell的时候，感觉这个移动应用的一些业务场景对我来说是新的。于是我用自己的知识体系和技术栈重构了这个应用的UI和功能。不到半个月，就完成了第一次commit，提交给项目上线。本文主要从应用功能和技术实现的一些方面来分析这个项目的开发过程和遇到的坑。项目截图项目技术栈前端vue开发项目核心框架axiosHTTP请求模块lib-灵活移动端屏幕适配解决方案better-scroll移动端滚动库仿IOS效果normalize.css第三方css样式初始化模块es6/7下一代javascript语法后端express构建服务器应用核心框架开发vue-cli项目初始化脚手架vue-devtools项目开发环境调试工具vscodechromegitmacbookpro部署代码托管仓库https://github.com/konglingwen94/vue-elm-sell在线地址123.56.124.33:5000应用功能[x]商品页面[x]商品分类导航与商品列表联动效果[x]积分点击商品分类菜单显示对应的商品列表信息[x]添加/删除商品到购物车[x]点击商品进入详情页[]添加商品到购物车动画效果[]标题天花板当页面滚动到对应商品分类时效果[x]评论页面[x]综合评论信息呈现[x]切换评论过滤项按钮显示相应信息[x]选择是否显示评论内容[x]商家页面[x]商户店铺信息展示[x]收藏店铺[x]商户动态图片弹跳效果滑动展示[x]应用头部[x]点击显示详情[]公告信息动态滚动展示[x]购物车[x]根据商品数量显示不同状态[x]购物车商品列表[x]付款弹窗[x]清空购物车[x]添加/删除商品[]应用部分优化弹跳效果指的是应用中页面位置滚动到一个端点并继续滑动时弹跳的效果，常见的场景是IOS系统应用滑动效果功能，比较难，产品导航的左右联动效果和内容进行了展示。完整的组件代码点https://github.com/konglingwen94/vue-elm-sell/blob/master/src/views/goods/index.vueidea既然商品导航和内容是两个独立的滚动容器，那么我们如何激活滚动到目标内容块时其关联的导航项？我们知道导航项列表和内容列表的排列顺序是一致的。如果能计算出对应区间块中内容滚动位置的索引，就会得到导航列表应该激活的目标索引，然后就可以利用Vue数据驱动视图的思想来实现这一切了。容器的左右联动效果是指当容器滚动到目标内容时，其关联的导航菜单项被激活并滚动到可见区域。逻辑实现第一步找到要激活的目标导航项的索引需要存储容器中商品内容的每个分类块的纵坐标位置（为后面找到要激活的目标索引提供对比对象),因为列表内容是动态渲染的，所以需要等到所有数据都渲染完了才可以操作。下面直接看代码演示吧！模板部分脚本部分exportdefault{data(){return{currentIndex:0,//导航项激活索引currentFood:{},data:[],sectionHeight:[0],//第一个高度块坐标`y`的值为`0`//渲染后的值为`[0,1281,1459,1612,2000,2270,2565,2952,3574,4436]`}},created(){request.get("/goods").then(response=>{this.data=response;}).then(()=>{setTimeout(()=>{constsections=this.$refs.foodsGroup;sections.reduce((prevTotal,current)=>{constsectionHeight=prevTotal+current.clientHeight;this.sectionHeight.push(sectionHeight);返回sectionHeight;},0);});});}}有了每个商品块的y坐标，接下来就是注册容器元素的滚动事件了。在回调函数中，找到sectionHeight数组中的实时滚动位置disanceY中相邻两个元素之间的位置，从而得到待激活导航索引的currentIndex值，具体代码实现如下exportdefault{//这里省略其他代码方法：{onFoodScroll({x,y}){constdistanceY=Math.abs(Math.round(y));for(letindex=0;index=this.sectionHeight[index]&&distanceY