uni-app开发了一个小型视频App（2）

前言

回顾之前的情况：uni-app开发了一个小型视频App（1）在前一篇文章中，我们实现了头部导航栏组件、底部的tabBar导航栏组件，中间的视频列表组件，以及视频列表组件中的视频播放组件。渲染视频列表后，它可以上下滑动以进行视频切换和播放。接下来，我们将完成主页的其余部分，左侧信息栏组件，右侧图标栏组件，以及视频切换动画、播放控制等功能的改进。

1、 创建左侧信息栏组件

左侧的信息栏组件主要分为三部分：作者名称、视频标题名称和音乐名称。左侧信息栏中的信息与当前播放的视频相关联，因此在循环视频列表时，左侧信息栏组件应一起渲染，因此左侧信息栏的组件应添加到＜swiper item＞Medium。

//组件/list-left.vue

<模板>

@朱晓涵

妈妈，我遇到了我的老同学，命运@岳父说了车@抖音小助理

<；！--此音乐框主要用于在滚动-->时隐藏音乐框范围之外的音乐内容

@朱晓涵创作的原声；nbsp；&；nbsp；&；nbsp；&；nbsp；&；nbsp；&；nbsp；&；nbsp；&；nbsp；@朱晓涵创作的原声

<样式范围>

.list左{

宽度：70%；

高度：120px；

颜色：白色；

}

.作者{

高度：35px；

行高：35px；

字体大小：17px；

}

.标题{

宽度：100%；

行高：25px；

字体大小：12px；

换行：打断单词；

颜色：#FFFAF0；

}

.音乐盒{

溢出：隐藏；<；！--滚动-->时隐藏多余部分

宽度：70%；

}

.音乐{

宽度：200%；

高度：35px；

行高：35px；

字体大小：12px；

动画：scroll-x 5s线性0.2s无限；<；！--应用动画--->

}

@关键帧滚动-x{<！--添加文本水平滚动动画-->

0% {

变换：translate3d（80%，0，0）；<；！--出现80%的位置，然后向左滚动--->

}

100% {

变换：translate3d（-80%，0，0）；<；！--动画后80%的位置-->

}

}

//组件/video-list.vue

<模板>

<视频播放器

：video=“项目”

：index=“index”>

<；！--将左侧信息栏组件放在中，与视频一起呈现在-->中

<；/左列表>

<样式>

.left框｛<！--将绝对位置添加到左列表组件，并将z索引设置为显示在视频上方-->

位置：绝对；

底部：50px；

左：10px；

z指数：20；

}

2、 创建右图标栏组件

右侧的图标栏组件主要分为：头像图标（头像设置边框半径）、收藏夹图标（图标信息图标）、评论图标（图标内容图标）、共享图标（图标图标）和音乐图标（图片设置边界半径），