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

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

项目仓库地址，欢迎 Star

---

实现效果

---

功能实现

1. 视频详情页基本实现

   创建 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>
   
   

   实现效果：
   

2. 文字跑马灯效果实现

   实现音乐名称的文字跑马灯滚动动画效果

   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 实现。

3. 封装 InfoBar 组件

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

   1. 将父组件 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: '团子和丸子 - 自创',
        },
      ],
      

   2. 在 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。

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