00:00
好的,我们继续啊,那上一节课呢,我们成功的拿到了这个视频列表的数据啊,那这节课呢,我们去把这个视频列表啊,我们给它展示出来,好的,那现在呢,来到我们的GS这一块,首先我们得将这个数据呢,是不是更新到中呀,啊,我上节课呢,我们仅仅是做了一个打印,对吧,那现在呢,来z.set data。嗯,我们去更新一下,我们要更新的呢,是这个video list啊,就是我们之前在data中的,诶,现在我没有初始化是吧?来,那我们初始化一个叫video list,它对应的一定是个数组啊,那这个呢,是视频的列表数据,因为它会有多个视频嘛,好的,那这个时候呢,Video list啊,我们初始化了一个,然后呢,在这里我们通过这个video list data。那就是我们最终拿到这个大的对象,点什么呀,点data就是我们想要的数据呗,哎来哎发过来,好的,那现在呢,我们来到啊。我们的APP data中确认一下我们的video list,哎,有值没有问题,好,那这个时候啊,呃,数据有了,来APP接算中,那现在呢,我们呃,第一个是video啊,没有问题啊,那这个呢,我们就给它关掉了啊,Request我们也关了啊,包括登录的我们也关掉,那这个时候呢,我们打开我们video的页面。
01:22
好了,在这里。呃,导航区域我们写完了以后呢,我们往下去走,嗯,那接下来我们先把导航收起来啊,我们要做的是是这个视频的列表区域,对吧?啊视频的列表区域来看一下,我写好这个啊,列表区域是可以上下滚动的。可以上下滚动的,那这个时候。哎,刚才大家看到这个是下拉加载,你看我刚才一下拉,呃,下拉刷新。以下呢,这刷新的是新的数据,那么下面是个可滚动的区域。那首先呢,我们是不是要整一个scar view,同时呢,这里边呢,哎,Scar啊,One为处啊,Scar啊。
02:05
对吧,那在它的里边呢,应该是这个视频的列表,那这呢,我们就要它一个video item个体,哎,Video item好,那这个个体我们也有了,然后呢,外面呢,我们上来就给它起一个class类来。那这一把呢,叫他video scary。没问题,那video这个个体里面呢,首先我们先不管别的,咱应该是先整一个视频。对吧,视频的一个组件呢,去给它显示出来啊,那这个时候呢,这个里面我先给他写一个video。啊V6组件,那么对应的src呢,其实就是我们最终啊是要播放的这个视频链接呗,那这个时候我们先去循环便利一下我们的数组,那这呢就是微信,嗯,For,哎,我们要循环便利的啊,就是我们的video list。
03:00
哎,对应的呢,是这个数组的数据。没有问题,那在这个里边呢,首先啊,我们循环遍历的话,我给大家收起来,你看每一个对象呢,长这个样,那这个里边呢,哎,通过我们的观察发现它并没有什么唯一值,用作我们的微型K。那这个时候怎么办呢?我们还得对这个数据呢,去给它加工一下。对吧,那在这加工的话呢,我们还是按照我们的老套啊,LA一个index等于零。对吧,那接下来呢,我let一个video list啊,等于什么呢。等于这哥们它点啊map,我们去给它加工一下,你比如说item,嗯。来这呢,应该是item来过来,呃,item.id让它呢,等于这个index加加倍,同时呢,别忘了return这个item,那这样的话呢,呃,下边这就不用写了,因为同名的属性。对吧,省略不写OK,那这样的话呢,这儿的微信K呢啊,我们就可以写什么呀,就是ID呗,然后啊,那这个视频的地址呢,我们看一眼。
04:11
来看一下这个数据啊,它呢在贝塔中。嗯,在贝塔中,那么贝塔里边呢,我们往下翻。有一个叫URL INF的,就是地址的啊,信息里面有个URL啊,那就是这个啊,这个是它的播放地址好了,那现在呢,我们应该是。首先要通过这个H呢,找到data.url in for,然后下边的URL呗。那这个时候呢,我们来看一眼。过来。嗯,那现在呢,呃,大家看啊,下边这会有个很长的滚动条啊,其实这个视频数据呢,在下面。这个滚动条为什么会出现呢?啊,还是因为什么问题啊,因为这个scar view的问题啊,这个呢我们也说过,但现在呢,我们是不是要给上边的scar view呢,去定一个高度呀。
05:03
好的,那现在啊,打开咱的样式文件,我们要给什么,要给这个导航区域的score,我又去写一个高度高啊,那这个高写多少呢。啊高写多少合适呢?啊,我现在呢,我这写个60啊,我写个60跟下面的个体呢保持一致,那这个时候呢,大家看一眼。东西是上来了,但是你看啊,那个红色的下边框我们看不到了。啊,那这是为什么呢?现在我们负元素的总高是60,子元素的高也是60,那你别忘了,除了60是不是又多了一个border?波嘛啊,多了一个像素的下边坡,但是负元素的高度呢,正好是60,所以是不是看不到呀。啊,看不到,那这个时候可以怎么办呢?我们可以去修改一下这个na h的和模型,就box s border box。对吧?啊,那这样的话呢,如果是有边框的话呢,是不是把这个下边框呢也计算在内啊好了,那这个时候我们再来看。
06:04
来往外点一点啊,往外点一点,那我们刷新一下吧。现在好像还是没有看到啊,还是没有看到,你看我点告白也没有,那那调试一下,嗯,过来。来,那这的总高60没有问题,里边的高呢30也没有问题啊,现在我去给大家点一个啊,那这个active也是这个动态的下面框好像没有了。应该是有我们点第一个。你看。有吧啊,但是下边框没有,下边框没有的话,这这个包三我们设完了,我们还应该设谁啊里边。你看它除了na h里边是NAV NAV content,我们是不是给他。身上设的这个下边框呀,啊,那这个时候呢,来。他下边的哎,Na,嗯。
07:02
我们把这个加给他试试看,那这哥们首先它的高度呢,应该是跟外面的高度它是一致的啊,我们也可以给他写一个60,然后包s border box,那这样的话呢。我们看一下效果。其实出来了,来,我给大家挪到这儿。看到没有,哎,其实修改一下它的和模型就好了,比较简单好的,那这是这个啊,这是这个来。那么下边的话。那视频的数据呢,已经出来了,没有问题,那么接下来呢,我们快速的去设置一下我们视频里面的啊一个样式,那么视频这个样式的话呢,首先啊,我们对这个video标签呢,去写一下它的样式啊,那这个呢并不难。我们通过这个video item。我先给大家加一个注释啊,那这个呢,是视频列表的样式对吧?Video HM下面的video标签啊,我们直接设一下它的框框啊。
08:02
来,我们看一下我写好这个吧,是多少。过来。嗯,352.5乘以什么。啊,一百八要注意啊,这儿的352.5这个呢,其实啊,并不是说我当初这样设的。嗯,我肯定不会写点五的,那这个是怎么来的呢?大家看啊,那这个视频标标签的两边啊,包括下面的文本两边是不是有点留白啊,这样的话好看一点。我是这样去做的,首先我给每一个video item,就是这个个体呢,加一个内边距。排定你比上下为零,左右呢我们来3%,那这样的话呢,是不是左右有3%的类别距啊,那么接下来的V呢,我们就让它宽呢,是100%,那高的话呢,啊,我们按照刚才量的那个啊去写啊,对应的就是360RPX诶360。嗯,来我们看一下效果,哎,把这个标签呢设置的规范一些,嗯,这样的话它不就出来了吗。
09:06
没问题,然后呢,为了好看一点的话呢,我们可以去设一下什么border。对radiOS,对border radiOS啊,我们来十个像素的圆角,嗯,让这个视频标签呢更好看一点,嗯,没有问题,好的,那这是这个啊,然后呢,我们确认一下里面的视频呢,可以正常的去播放,来把这个关掉,我是老盼盼选秀节目,稍等啊。这有点卡,好了我把它关掉了,嗯,没有问题,那现在呢,这个视频的列表我们就整完了。那么视频列表这大家要注意啊,呃。现在我们除了这个video标签下边是不是还有一部分内容,那这一部分内容呢,目前是没有什么交互的,那没有什么交互的,我是只是写的跟他的官网保持一致,所以呢,下边的内容啊,如果感兴趣的同学呢,大家下来可以自己去敲一敲。
10:04
呃,可以自己去敲一敲,那我们就不浪费时间去写他的这个静态布局了。OK啊,只不过是里面的这些数据呢,我还是用的官方的啊,用的官方的,那么针对于这个情况呢,我呢先把下面的内容呢,给它复制一份拿过来。哎,然后呢,放到我们这个video的下面,哎是这样的两部分内容,一个是content的,哎一个呢是photo,就是底部的内容,那么结构拿过来以后呢,我把对应的这个啊样式呢也给它拎过来。来到我们的钥匙这丢到下面去,丢到下面去要注意一下啊啊,这个content的上一集呢,我这写的video list啊,这是我之前写好的,那现在呢,我们counter的商业节呢叫video,所以呢,我们把这个换掉。来,那这个时候呢,我们看一下效果。大家看啊,这样的话呢,就跟我写好的那个,哎,其实就是一样了。
11:00
对吧,那跟我写好那个就一样了,没有问题,那么现在这个呢,跟上边这个现场这些呢,挨的有点近啊呃,导致呢,我们看不清那个下边框了啊,所以呢,我们可以给我们的video score。整体的我们去加一个上的外边距呗,来十个像素的上半边距啊,就差不多了,来。那现在是不是就能看得很清楚了,好的以上呢,就是我们动态的显示了一下这个视频,哎,列表区域啊,那这里呢,并不难啊,并不难,就是我们之前的常规操作,那这节课呢,先给大家讲到这里。
我来说两句