面试项目介绍

洋葱OMALL APP ：

• 整个项目主要用vue来搭建的，用vue-router实现底部导航等页面跳转功能，然后购物车信息，货物数量，秒杀时间段等数据用vuex储存，各个页面又分为多个父组件和子组件，用props,$emit方法来进行数据通讯。
• 买货页
  
  • 消息和分享的ui图标是我做的，调用后端接口，实现分享功能。
  • 搜索点进去立马就会发送一个ajax请求，将历史和热门搜索返回到下面的两个div中，用v-model实现input内容的双向绑定。
  • 轮播组件用vue的移动端组件mint ui 快速搭建的，用原生js 搭建也可以（setinterval).
  • 下面的也是个二级导航组件，布局就是用弹性布局（justify-content: flex-start | flex-end | center | space-between | space-around；；align-items: flex-start | flex-end | center | baseline | stretch）
  • 商品列表组件，用父组件包住子组件的方式，v-for方式遍历渲染列表。
• 种草页：
  
  • 也是列表的渲染，加上H5 video

品胜当日达：

• 首页:
  
  • 搜索框搜索提示（监听键盘弹起事件onkeyup）发送请求返回提示。
  • 导航 onMouseOver鼠标移入事件。
  • 轮播：绑定类名来确定显示哪张，两边控制按钮改变类名实现控制。
  • 商品列表用css3 阴影box-shadow 和 translate() 偏移
  • 旁边回到顶部：监听滚动条位置：window.scrollTo(x,y);

• 详情页：

  • 锚点设置

• ajax如何请求：

  • if(window.XMLHttpRequest)判断是否有
  • 有则创建XMLHttpRequest对象，无则 new ActiveXObject(‘Microsoft.XMLHTTP’)
  • .open(‘GET’,’./ajax.xml’,true)建立连接
  • .send()发起请求
  • onreadystatechange=function(){}回调函数

• 懒加载：
  监听滚动条,发送ajax请求