Vue仿今日头条--手机端视频栏目和小视频栏目等
本文主要分析系列《Vue仿今日头条》中手机端的“视频”栏目、“小视频”栏目（列表和详情页）和“我的”栏目的所有相关页面，效果图如下图：
工具/原料
Sublime Text
Chrome浏览器调试
视频页面
1、 template和style代码如下图（1-6），最终显示效果如下图（7）： 1.template有一个比较特殊地方，就是使用“canvas代替video播放”，因为video在ios会显示空白； 2.template的“NoneData”（组件）用于显示加载全部数据的提示信息，“NoneData2”（组件）用于显示没有数据的提示信息。
2、 script代码如下图（分析重点代码）： 1.加载页面时“created”，先清空“视频”栏蚕蝣鲢蹙目数据，不然会导致多显示原先的旧数据； 2.方法“loadingMore”用于往上拖动加载更多数据，原理是利用每次往上拖动时，获取数据的页数加1（this.pageindex++），然后把获取到的数据合并原先的数据，再渲染到页面上； 3.方法“play”用于点击播放视频，该方法有两点比较重点地方： 1）“if (lastItem)”用于暂停播放的视频，避免多个视频同时播放； 2）调用方法“dragVideo”利用canvas来绘制视频的每一帧图像，从而实现类似播放的效果。
小视频栏目
1、 列表页面template和style代码如下图（1-3），最终显示效果如下图（4）：
2、 列表页面script代码如下图（分析重点代码）： 1.加载页面时“created”，先清空“小视频”栏目数据（this.$store.state.video.list = []），不然会导致多显示原先的旧数据； 2.方法“loadingMore”用于往上拖动加载更多数据，原理是利用每次往上拖动时，获取数据的页数加1（this.pageindex++），然后把获取到的数据合并原先的数据，再渲染到页面上； 3.方法“goVideoDetails”用于跳转到详情页，并更新播放次数。
3、 详情页template和style代码如下图（1-7），这一块代码量比较大，主要分析一下template的重点代码，样式这一块都比较简单，这里不作过多分析： 1.template的“head”这一块显示头部内容，左边箭头图标点击返回首页，右边更多图标点击弹出其它功能页面； 2.template的“#video”显示视频内容，铺满整个屏幕，且自动播放； 3.template的“userInfo”这一块显示作者头像（固定）和作者，点击“关注”按钮可以切换不同状态（未关联接口） 4.template的“comment”显示input输入框（用于评论）； 5.template的“buttons”这一块显示跟拍图标（未实现）、点赞图标、评论图标和分享图标（弹出分享页面）； 6.template的“el-drawer”显示弹出框的布局，可自行查看element-ui。
4、 详情页script代码如下图（分析重点代码）： 1.加载页面时“created”，代码“Lo艘早祓胂cal.set('detailsID', this.$route.params.id)”为了解决刷新时候，报id没有的问题； 2.方法“getPercentage”用来计算视频播放进度，底部输入框上面的线会根据播放进度显示对应长度的红色； 3.方法“toggleLike”先判断是否登录，未登录会跳到登录页面；如果未点赞状态，点击“if (this.islike)”则变为点赞状态、数量加1并保存数据到数据库，反之则变为未点击点赞状态、数量减1并删掉点赞的数据； 4.方法“submitComment”先判断是否登录，未登录会跳到登录页面；登录状态下则把评论数据和用户相关信息保存到数据库。
我的 栏目
1、 “我的”template和style代码如下图（1-7），这一块都比较简单，这里不作过多分析，最终显示效果如下图（8（未登录））：
2、 “我的”script代码如下图（分析重点代码）： 1.加载页面时“created”，获取用户名（Cookie.get('username')）和头像（Cookie.get('useravatar')），用来判断如果已经登陆过，就直接显示用户信息，不需要再次登录； 2.方法“login”点击跳转到登录页面； 3.方法“logout”用于退出登录（在页面底部，效果图未截到），主要是清除cookie并刷新当前页面。 Tips：该页面除了实现登录和退出功能之外，其它都未实现功能，可参考其它页面的方法实现其功能。
3、 登录页面template和style代码如下图（1-4），这一块都比较简单，这里不作过多分析，最终显示效果如下图（5（未输入））：
4、 登录页面script代码如下图（分析重点代码）： 1.方法“changeNumber”： 1）由于“type为number时，maxlength不起作用”，所以需要使用“inputVaule.slice(0, 11)”来截取长度； 2）校验输入数字，满足正则表达式（if (pattern.test(this.inputValue))）则高亮按钮，才可以点击下一步； 2.方法“goAccount”用于点击跳转到“我的”页面，未实现手机号码跟数据库关联，只是使用Cookie.set进行缓存。
