“小说列表模块”前端代码官方评审「在线实习·推推」

在线实习是大拿老师为了正在准备校招的IT同学带来的免费项目，每期一个主题，业务模式简单且项目突出，适合作为校招的项目经历。

本期小拿带来的是在线实习「推推」项目“小说列表模块”的前端代码官方评审，大拿老师针对几位同学的前端代码作业提出了一些普遍存在的问题，快看看你有没有成功避开这些雷区呢？

01 小胡同学

大拿老师点评

1.第一个模块比较简单。现在很多同学不太理解TAB，TAB在手机APP或移动端网站上很常见，每个TAB对应一个页面，容易用组件实现。一定要注意不是上面TAB，下面展示区、列表区进行替换，跟TAB本身的交互控件不一样。如果替换，切换回来只能从第一个页面打开，而不是从前面已经看到的地方来获取。如果是两个页面，是可以继续往下翻的，共用一个部分却只是把内容替换了，并不算TAB的展示形式。

2.样式部分虽然不是重点，但是直接写到样式里不是一个特别好的选择，最好规范一下放到每个模板下面的CSS的部分。

3.最后拉的两个值缺少切换。设置了pageID的值却没有放上去。

4.用了VUE尽量不要操作dom模式。用值去指定范围，不要通过JS本身去取值，否则就把VUE最本身的核心的东西打断了。

5.两个核心，一个核心在于TAB这个控件是非常常见的。现在只有两个TAB，如果有五个TAB呢？每个TAB的页面、功能可能不一样，要自己去把它关联起来。另外，APP有一个功能：下面的内容区域左右滑动的时候，也可以带动上面TAB空间的滑动。

6.注意触发点，第二个共同点是怎么触发加载更多的？这位同学暂时没有完成。很多时候To C的商业面不是用组件来做的，因为组件更合适做后台，但一些常用的例如APP开发、导航区、状态区等常用的东西能用就用，会省很多时间。

02 晨同学

大拿老师点评

看两个点，一个是怎么做的TAB切换，另一个是怎么做的自动更新。

1.拉取可以真实地调一下接口。还是刚才的问题，怎么触发？拉取新的数据是看不到的。一定要注意翻页自动更新如何实现，如果你用VUE 的list组件，可以支持它的自动更新；但是如果自己来实现，也不是很复杂，通过定位了解有多大的距离，就能触发一个access后台的数据。

2.第二，如果是一个TAB组件，最好用多页面。做移动端要知道常见的控件。比如做多选按钮，不会一个一个点去换、一个一个按钮去画。需要知道它是一个多选按钮的复选组件，注意常用的布局。

03 上同学

大拿老师点评

1.这个同学直接给的是一个页面。脚本的部分不太对，本来只有两个list，为什么还多出一个list？

2.调后台的数据，是自己组装的一个数据。两个列表是正确的，但还是刚才那个问题，没有理解TAB是多页面的风格。

3.需要思考有哪些是在下面加，哪些是从头去更新。依旧没有解决如何触发信息的问题。

这几个同学的作品问题都在触发更新和两个列表的TAB展示上。同学们一定再去看一下Vant的组件，官方版本也会给出。

本期在线实习就到这里啦，如果对其他在线实习项目感兴趣，欢迎关注“校招VIP”公众号查看更多精彩内容~

---

编辑丨小拿

小程序丨校招VIP

微信公众号丨校招VIP