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

原创

于 2021-05-13 16:42:49 发布 · 505 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web app #css3 #html5 #javascript #vue.js

本文档介绍了在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">