2022年夏季《移动软件开发》实验三报告

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

步骤一

先是设计UI界面。

顶部小程序信息与配色

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#787999",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "口述校史",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  }
}

下面的信息显示，结合html和css的设计，分为视频播放部分，弹幕发送部分，以及视频列表

css部分

video{
  width: 100%;
}
.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border: 1rpx solid #787999;
  height: 100rpx;
  flex-grow: 1;
}
button{
  color: white;
  background-color: #787999;
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border