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

最新推荐文章于 2024-10-16 16:29:24 发布

八了个戒

最新推荐文章于 2024-10-16 16:29:24 发布

阅读量673

点赞数

分类专栏： Vue 实战系列文章标签： vue js css3 html vue.js

本文链接：https://blog.csdn.net/XH_jing/article/details/116646717

版权

Vue 实战系列专栏收录该内容

22 篇文章 3 订阅

订阅专栏

如果想看该实战系列的其他内容，请移步至 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>