Vue.js 实战系列之实现视频类WebApp的项目开发—

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

实现效果

功能实现

视频详情页基本实现

创建 InfoBar.vue

<template><div class="info-bar"><div class="infobar-item">@逗逗飞</div><div class="infobar-item">vue实战 视频类webApp</div><div class="infobar-item music-item"><span class="iconfont icon-douyin"></span><div class="music-name"><span>千岛群岛群无多</span></div></div></div>
</template><style lang="less" scoped>
.info-bar {color: #fff;padding-left: 10px;font-size: 16px;.infobar-item {padding: 5px 0;display: flex;}.music-item {width: 200px;white-space: nowrap;font-size: 16px;}
}
</style>

实现效果：

文字跑马灯效果实现

实现音乐名称的文字跑马灯滚动动画效果
1. 文字的跑马灯动画通过 css3 的 keyframes 实现
2. 通过标签的 data-* 自定义属性获取后面滚动的文字
其他代码不变，只更新 .music-item 部分代码
```
  .music-item {width: 200px;white-space: nowrap;overflow: hidden;font-size: 16px;.music-name {span {display: inline-block;padding-left: 100%;  /* 从右至左开始滚动 */animation: marqueeTransform 10s linear infinite;&:after{content: attr(data-text);margin-left: 60px;}}}@keyframes marqueeTransform {0%   { transform: translateX(0); }100% { transform: translateX(-100%); }}}
```
实现效果：

文字跑马灯效果一般有三种实现方式：
1. html实现
  使用 marquee 标签，配合它的一些属性，可以实现功能强大的跑马灯文字
```
<marquee> 跑马灯 html实现 </marquee>
```
  注意：这个 marquee 标签，并没有被 W3C 标准录入，也就是在未来的某个时候，它可能会被弃用，请慎用。
2. js实现
  一般不推荐使用js实现，这里就不展开说了，感兴趣的小伙伴可以自行研究，也很简单的。
3. css实现
  通过 keyframes 实现。

封装 InfoBar 组件

由于每一个视频的详细信息都是不同的，所以我们需要将他们的内容单独分离出来，通过父组件传递到 InfoBar.vue 组件中。

将父组件 VideoList.vue 的 InfoBar 组件进行更新

以下代码只是部分代码，完整代码见 Github

// 更新引用 InfoBar 组件的方式
<div class="info-bar"><InfoBar :infoName="item.author" :infoDesc="item.desc" :infoMusic="item.music"></InfoBar>
</div>
//  更新 dataList 数据
dataList: [{id: '1',url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',author: '小兔子',desc: '这里讲的是一只小兔子的故事',music: '小兔子乖乖 - 乖乖',},{id: '2',url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',author: '皮卡丘',desc: '这里讲的是一只皮卡丘的故事',music: '皮卡丘 - 球球',},{id: '3',url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',author: '表情包',desc: '这里全是表情包，超可爱',music: '表情包 - 三生',},{id: '4',url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',author: '团子和丸子',desc: '这里是团子和丸子的小生活',music: '团子和丸子 - 自创',},
],

在 InfoBar.vue 组件中接收父组件传递过来的值，并在页面中展示

<template><div class="info-bar"><div class="infobar-item">@{{infoName}}</div><div class="infobar-item">{{infoDesc}}</div><div class="infobar-item music-item"><span class="iconfont icon-douyin"></span><div class="music-name"><span :data-text="infoMusic">{{infoMusic}}</span></div></div></div>
</template>
<script>
export default {// 通过 props 接收父组件传递过来的值props: ['infoName', 'infoDesc', 'infoMusic'],
};
</script>

总结

本章节内容不多，主要是通过 css3 的 keyframes 来实现文字跑马灯效果。

但是要注意以下细节，需要使用 :after 选择器 来重复展示当前的音乐名称，通过标签的 data-* 自定义属性获取后面滚动的文字。

上一章节： 5. 视频播放列表实现

下一章节： 7. 点赞评论分享以及唱片旋转动画

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。

Vue.js 实战系列之实现视频类WebApp的项目开发——6. 首页视频详情实现相关推荐

axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
3.Vue.js 实战调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...
[Vue.js] 一篇超级长的笔记，给《Vue.js 实战》划个重点
本文前言本笔记建立在书籍<Vue.js实战 / 梁灏编著>的基础上,旨在帮助有 Vue.js 基础的朋友快速回忆 Vue.js 的细碎内容.初学者建议阅读<Vue.js实战> ...
Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节接下来我们要学习第七节了,时间过的好快. 组件详解组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
《Vue.js实战》读书笔记
嗯,加油啦!!都是书里的东西,整理了一下,以后复习的时候看. 电子档资源见评论摘些最近看书的句子: 迪安却不一样,他为了面包和性爱在社会上使劲打拼. 我不知道自己究竟是谁了,我远离家乡,旅途劳顿,疲 ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
js 查错_7年前端开发经验的我，写了本Vue.js实战开发，开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...
vue --- vue.js实战基础篇课后练习
练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1 练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10 思路: // 考虑到子模板的复用性,即在 ...

Vue.js 实战系列之实现视频类WebApp的项目开发——6. 首页视频详情实现

实现效果

功能实现

总结

Vue.js 实战系列之实现视频类WebApp的项目开发——6. 首页视频详情实现相关推荐

最新文章

热门文章