vue.js项目实战运用篇之抖音视频APP-第九节： 视频上滑下拉播放功能
【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。
【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub
第九节： 视频上滑下拉播放功能
回顾及介绍
在第五节中我们实现了视频列表及视频播放的组件，在这一章节中将进一步了解上滑、下滑播放视频的实现。
视频播放组件详细地址：common/components/VidoeList。
上滑播放功能
实现的函数如下：
export default {name: 'Videos',props: ['video', 'index'],data: {on: {tap: () => {// 播放this.playAction(this.page - 1);},slidePrevTransitionStart: () => {// 上滑if (this.page > 1) {this.page -= 1;this.preVideo(this.page - 1);}},},},methods: {// 向前preVideo(index) {this.$refs.videos[index].play();this.$refs.videos[index + 1].stop();},}
}
下滑播放功能
实现的函数如下：
export default {name: 'Videos',props: ['video', 'index'],data: {on: {tap: () => {// 播放this.playAction(this.page - 1);},slideNextTransitionStart: () => {// 下滑动this.page += 1;this.nextVideo(this.page - 1);},},},methods: {// 播放playAction(index) {this.$refs.videos[index].playOrStop();},// 向后nextVideo(index) {this.$refs.videos[index].play();this.$refs.videos[index - 1].stop();},}
}
结束语
本章节主要介绍了视频列表组件中的视频上滑、下滑播放相关内容，若有疑问或不足之处，欢迎留言讨论。
项目仓库
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习讨论，共同完善本项目。
项目地址：GitHub
上一篇：视频播放功能
下一篇： 评论列表功能
vue.js项目实战运用篇之抖音视频APP-第九节： 视频上滑下拉播放功能相关推荐
- vue.js项目实战运用篇之抖音视频APP-第二节：项目基础架构搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十一节： 注册登录及验证码功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第八节： 视频播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第一节：项目环境搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十节： 评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第六节： 首页视频详情功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
最新文章
- 测试电子负载用于无线充电系统的功能和精度
- C语言素数筛选法(prime seive) 算法(附完整源码)
- mysql数据库备份工具expdb,使用expdp完成自动备份数据库案例以及遇到的问题
- 【工作总结】银行应用系统架构（二）
- java digests.generatesalt_Java DigestUtils.sha1Hex方法代碼示例
- C++之访问命名空间/名字空间元素的三种方式
- Linux操作系统中vi常见用法和相关配置
- linux设置开机自启动的方式总结
- 盘点：那些年的游戏公司
- 用Python复现机器学习中12种经典降维算法
- 都市丽人“正青年”设计大赛结果出炉 感召中国新生设计力量
- 西门子1200/1500PLC不定长数组选择排序的运用编程实例
- QTableView中添加icon
- 按关键字搜索易贝商品 API
- java 二进制运算
- 并查集 浙师大oj1212
- SQL语法之分组函数，分组查询（进阶5）and连接查询（sql92语法进阶6）
- 产品级项目---智能随访系统
- 奥比中光深度相机ros2 humble版安装分享
- 一种常规的四芯或多芯排线的线序检测电路