我今年4月投递了腾讯前端开发岗位，很可惜笔试题没通过，48小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来（嘤嘤嘤）。当然以我现在的眼光来重新看那份答案，都觉得那不应该是一个一年的前端开发工作者给出的答案。
话不多说，下面给出面试题吧
一、腾讯线上面试原题和附带材料
1. 面试原题截图
2. 附件
具体的psd文件点击前往
谷歌云盘获取
二、题目分析
首先我目前只针对前端做题目分析，当然全栈大佬们还会顺带实现切图，用户体验设计，后台，运维等等
2.1 高精度还原
考察
ps工具的使用，因为附件中面试官给的材料是psd格式文件。需要自己去切图、取色、取间隔大小
2.2 使用Vue，合理规划组件
考察你对
框架的理解和运用能力。这个框架的选择无大碍，大概是因为当初我简历上Vue的项目比较多，所以面试官选择让我用Vue实现。当然，你用React或者其他也行
2.3 支持手势滑动和左右切换Tab
对我这种初级前端工程师，更多考察我对第三方库的运用，而不是让我造轮子。
2.4 下载态的更换和小动效
考察异步和css基本能力
2.5 48小时内回复
这应该是最难的一点。毕竟大公司，追求速度效率，谁能在规定时间内交出一份令人更满意的答案，谁更能得到青睐。
三、项目分析
这道题看起来很简单，应该很多人会直接上手撸代码，边做边改。
这时候我们不妨放慢脚步，慢慢欣赏这张UI设计图。
忽略头部，专注主体
红框内是手机浏览器自带可忽略，硬要说考虑，那就只有“游戏分类”这4个字了= =
Tab部分
- 重点在于这部分要配合底部列表的滑动切换，从项目结构来看，就是涉及到Tab组件与List组件之间的通信
- 从用户体验上来看，我们还喜欢在切换的时候，底下的Tab滑动条不是瞬变的，而是随着页面一起滑动。
- 从程序涉及的可延伸性来看，我们还希望，Tab组件不应该是6个固定值，而应该是可配置的，如果超过6个，Tab也可以滑动。
列表部分
- 重点在于长列表处理，考察懒加载、下拉加载
- 如果还注重细节，那还要考虑切换Tab的再次回来的时候，原先的Tab页面是否需要缓存位置；各种边界情况的处理，比如说空数据，网络错误等等；上拉刷新页面；左右切换实现过渡效果
四、答题前的准备
1. react配合webpack
思否上也有从0开始webpack配置react脚手架的详细教程
2. 脚手架准备好了，那么接下来我们需要分析页面结构
- 头部Tab组件，这个实现比较简单，那我们就原生实现
- 可左右滑动，上拉刷新，下拉加载的列表页。下滑列表采用第三方库
better-scroll再次封装出一个组件 - 2个组件之间要相互通信，这样左右滑动的时候，导航栏可以跟着滑动。通信方式我们采用
redux - 暂时先用mock数据模拟数据
目录结构
├── src
│ ├── pages // 页面
│ ├── components // 组件
│ ├── store // redux数据源