video页面头部搭建

首先头部的结构是这样的

 这里采用的是淘宝双飞翼布局。俩端固定，中间自适应。

这里说一下这个flex:1

flex-grow:可拉伸 flex-shrink:可压缩 flex-basis:当前元素的宽度

flex默认值:flex-grow:0,flex-shrink:1,flex-basis:auto

flex:1 flex-grow:1,flex-shrink:1,flex-basis:0%

flex:auto flex-grow:1,flex-shrink:1,flex-basis:auto

flex:1会导致父元素宽度自动为100%

video导航区静态搭建

 这里我们把数据写死，然后我们发现display:flex失效了，我们需要给它添加enable-flex属性

 导航数据动态显示

看一下文档知道 

访问的接口为/video/group/list

  书写对应的方法

 把数据成功渲染到页面上，但是每一个都添加了active这个类。我们需要写成一个动态的

 通过id传参来判断是否相同，相同就给class，否则为空

 这里我们使用右移运算符也可以

右移零位会将非number数据强制转换为number

而我们想要开始第一项就有下边框，我们可以在获取导航数据的时候直接设置 

通过cookie获取视频数据

首先，让我们的后台服务器跑起来

然后看文档 

 

 我们需要先拿到用户的cookie。这里要注意的一点是,如果cookie为空，那么可以重新登入一下，获取cookie

我们在request.js中把cookie存储到本地。

然后我们在响应头携带cookie

这个cookie有很多值，而我们只需要其中的第一个就可以了

 先写死，不知道为什么我没有拿到cookie的值 

视频列表动态显示

感觉我游客登录好像没有借助cookie拿到视频列表，而是通过一种写死的方式直接拿到

完蛋前面的好像白写了，这个urlInfo视频为空，我们可能需要换一个接口了

 我看了一下这个好像是可以的，但是只能获取一个。开启自欺欺人模式

 点击切换视频功能实现

 原本的功能是点击上面的nav，下面显示对应的视频。而我们采用写死的方式，那肯定是没有效果的。因此我们就做一个类似效果

原本切换可能存在网络延迟的问题。因此我们需要添加一个wx.showLoading。表示一个正在加载

 这里我们需要手动关闭消息框。

导航过渡效果实现 

这里我们需要用这个

 通过id的方式来控制。但是这是没有过渡效果的

我们可以通过这个属性来控制

 这就有过渡效果了