vue.js项目实战运用篇之抖音视频APP-第六节： 首页视频详情功能
【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。
【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub
第六节： 首页视频详情功能
详情功能介绍
视频首页的详情信息显示及轮播动画的实现。为了增强功能模块的复用性，此处采用组件进行封装。
组件结构分析
1.组件结构
2.组件的布局及实现
/*
视频详情信息组件
author:enjsky.g
time:2021-05-06
*/
<template><div class="info-bar"><div class="infobar-item">逗逗飞</div><div class="infobar-item">Vue 从0到1 实战</div><div class="infobar-item music-item"><span class="iconfont icon-douyinbiaoshishang"></span><div class="music-name"><span data-text="千岛群岛群无多">千岛群岛群无多</span></div></div></div>
</template><script>
export default {name: 'InfoBar',
};
</script><style lang="less" scoped>.info-bar {color: #ffffff;padding-left: 10px;font-size: 16px;.infobar-item {padding: 5px 0;}.music-item {display: flex;}.music-name {width: 200px;white-space: nowrap;overflow: hidden;font-size: 16px;}.music-name span {display: inline-block;animation: scroll 5s linear infinite;&:after{content: attr(data-text);margin-left: 40px;}}@keyframes scroll {from {transform: translateX(0);}to {transform: translateX(calc(-50% - 20px));}}}
</style>3.在视频列表组件中引用视频详情组件
1）视频列表组件位置：coomon/components/index/VideoList
2)引入视频详情组件
在Script中引入组件，代码如下：
import InfoBar from './InfoBar.vue';// 视频详情信息组件
3）初始化组件
在export default中的组件方法中初始化InfoBar组件，代码如下：
export default {name: 'VideoList',props: ['dataList'],components: {InfoBar,}
}
4)调用组件进行布局
<!-- 视频底部详情组件 -->
<div class="info-wrap"><info-bar></info-bar>
</div>
实现效果
结束语
本章节主要介绍了视频列表中底部详情的实现相关内容，若有疑问或不足之处，欢迎留言讨论。
项目仓库
项目采用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中 ...
最新文章
- java基础之【堆、栈、方法区】结构图
- 怎么配置SQLServer2005以允许远程连接
- 【牛客 - 283E】贪心只能过样例（模拟）
- 一步步yum安装LNMP，脱坑笔记！！！
- 100 行 Python 代码实现人体肤色检测
- JAVA SE知识点总结
- 机器学习与计算机视觉（darknet编译）
- AI给你安利了一个职位，猜猜它觉得你适合做什么？
- 关于springboot集成redis及关于redis的Key 乱码问题
- 遗传算法的基本概念和实现（附 Java 实现案例）
- 十个实用的谷歌搜索小技巧
- java 登陆微信获取好友列表_微信api接口，触发推送微信好友列表及返回
- 模板消息php 群发,微信公众号模板消息群发php代码示例
- python qq群聊机器人_群聊太多？三步教你用 Python 自动监听转发群消息
- Cocos Creator下JavaScript模拟砸金蛋3d旋转效果，附代码
- java路径为什么拒绝访问_为什么拒绝访问路径？
- Nginx：配置 proxy_pass 代理转发
- maya建模与骨骼动画快速实现人工鱼
- 公众号资源分享欢迎关注
- 传奇私服服务器怎么增加npc,在自己的传奇服务器中如何添加NPC