vue.js项目实战运用篇之抖音视频APP-第六节： 首页视频详情功能

Posted 2021-05-16 enjsky.G

【温馨提示】：若想了解更多关于本次项目实战内容，可转至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

---

上一篇： 视频播放列表组件功能
下一篇：视频点评快捷功能