00:01
好的,我们继续啊,那上一节课呢,我们是把这个导航的这个布局啊,我们写完了,那这一节课呢,我们将它里边的数据呢,写成动态的。啊,那要写成动态了的话,那这儿的数据呢,也是需要发请求啊去拿到的,所以呢,我们去看一下我们的这个接口文档来,那么我们现在来到3.6啊,获取视频标签列表的数据,那么对应的接口地址呢,是这个发的请求是get啊,也不需要什么参数,所以呢,我们直接去测一下这个接口来过来。哎,Local host,哎3000下面的他回撤。好,那这个时候呢,大家看啊,我们成功的拿到了这个数据啊,那很明显这个对象里面的data啊,这个数组呢,是我们需要的数据,你看什么现场呀,翻唱舞蹈等等吧,哎,那这个data的话呢,你注意看默认哎,108个啊,哎,这不梁山好汉嘛,对吧,108件,那现在呢,它有108个啊,那我们的导航呢,很明显不需要那么多,你也不可能显示108个让用户去翻。
01:06
哎,那官方的话呢,是显示了十四十四个啊,所以呢,接下来呢,我们也去这14个。哎,这个呢,稍后我们来处理一下啊,好了,那测试了接口没有问题呢,那现在啊,来把我的钥匙就关了,我们接下来要写GS。对吧,首先要发请求的话呢,你需要先把那个request方法呢引入引入进来,上一级在上一级U下边的request。没问题,而我们发起球呢,要拿这个导航标签的数据啊,所以呢,我们去初始化一个,那这个呢,我就叫就叫它一个video group list数组,那这个呢,对应的是啊导航的标签数据好的。那叫video group list呢,目的是为了跟这个保持一致啊,大家看它这个接口呢,就是video group list对了吧,好的,那这样的话,这样的话呢,一看我们就知道哦,我这是干嘛的来,那么接下来我们要发请求,对吧,去获取这个导航标签的数据啊,所以呢,我放到下面去,哎,那这个呢,是获取导航数据,嗯,来一个get video。
02:21
呃,类似吧啊。就叫video吧,嗯。Video group吧,嗯,List啊,Data啊,这是一个方法,OK,那在这个方法里面呢,我们去发请求啊,所以呢,我这来一个let video。嗯,Group list data吧,等于什么的,Request对应的接口地址呢,是这个,那么前面我们是不是加一个A就好了。哎,没有问题,那么拿到的数据最终呢,我们去更新一下啊set data,嗯,我们要更新的呢,是这个video,嗯。
03:04
Group list啊,对应的数据源。嗯,那不就是它吗?那这个对象里面呢,我们要取谁啊,要取这个得塔对不对,这是一个大的数组,好点得塔,那么我们不需要啊,108将对吧,我们整个14个的话呢,这个时候呢,我选择用slides啊去给它截取一下零到14。啊,那最终截取完的是谁呀?哎,零到十三一共是不是14个。值啊啊,这个时候要注意啊拉呢,它截取的时候包含起始的位置的元素,不包含这个结数位置的元素啊,这点大家要注意好的,那么最终这个方法呢,是不是应该在这里面去调用一下啊。啊,我先给大家把这个方法放到这啊认点。哎,这个方法一调用就好了,那么这呢要做的其实就是获取这个导航标签的数据呗。
04:03
来,那我们确认一下,在我们当前的页面来到APP data中打卡数据有了14个,那么有了以后呢,我们就可以将我们这里边的东西呢拆掉,然后给它写成动态的过来,那么下面这些啊,我刚才粘了挺多的。都不要了,哎,留一个就够了啊,我们要循环遍历生成多个na嘛,所以呢,在它的上面呢,应该是微信,呃,For,那这里边呢,就是video啊,Group。嗯,然后呢,List对吧,啊微信K,我们看看有没有什么唯一值。来来到这个官方这儿啊。里面是不是都有自己的ID呀,哎,所以呢,这个时候呢,我们这写ID就好了,那这的文本,嗯,那不就是item点我们看一眼。哎,应该是内部。对吧,好的,那这样的话呢,我们看一下我们的效果。嗯,打卡就出来了,出来了以后啊,现在每一个都有那个红色的下边框,对不对,那这个呢,是因为咱这的active现在是写死的啊,我们要给它写成动态的。
05:11
要写成动态的呢,也比较简单,到时候我点击哪一个,哪一个是不是要动态的,那首先我们要整一个标识,去记录一下我到底点击的是谁。对不对,哎,我到底点击的是谁,所以呢,在这里呢,我们继续呢,整一个NAV ID啊,那这个呢,是导航的标识呗。导航的标识,那接下来呢,我们给这个每一个啊na count的,我们去绑定一个点击事件啊,你provide tip啊,那这个呢,就是change na。那点击的时候。首先我们要知道我点击的是谁啊,所以呢,我们可以通过这个ID去将什么将我们这个item点。嗯,ID传到这个点击的啊对象中,那这个呢,我们也讲过啊,然后来到对应的GS里面,我们去定义一下,呃,那这个呢,是点击,哎切换导航的回调,哎把它呢放到这里。
06:18
OK。好,来,那这加个逗号啊回车,那么在这里呢,首先这有个event对吧?啊,我要拿到这个ID呢,也不能也不难啊,我let这个na ID嘛,等于什么点你不current target.id这是我们当前的标识,然后呢,我们需要做的是将这个标识更新到我们的data中。NAV ID。VIDOK,那这样的话na v ID我们收下来了,那这个时候呢,大家看啊。呃,初始化没空啊,我点哪个你看。哎,这不是动态的吗?嗯,没有问题啊,这是动态的,好了,那么现在这是动态的,那那接下来我们只需要判断一下我的na ID跟你的i.ID。
07:10
对吧,如果相等。我是不是就可以用这个XT啊,所以啊这动态的class,这个时候大家看啊,它动态的class应该是这样去写在这个里面,我们判断一下我们收录的这个na ID,如果是等等于I加ID为two。哎,那我们就用它啊,否则的话呢,那就啥也没有,这是一种写法啊,我们先来看行不行。过来我随便点,哎,这个时候大家先看这。内容其实是在变化,但是你看很明显。对,很明显这里呢,没有显示这个下边框。那这是为什么呢?那那这个时候呢,我们首先要确认一下,你比如说我点个翻唱啊,60100,我们看一下啊,翻唱的ID确实是60100。
08:03
那为什么他没有匹配上呢?哎,那这个时候呢,给大家说一下啊。我们往进传item.id的时候,你要注意啊,我们当初传进去的这一定是个number。对吧,那现在我们通过ID传进去,然后在这边呢,通过对象接收的。这个ID我给他打印一下啊,你看一下它的type of ID,我们看一眼长什么样。来来到我们的啊,模拟器里面。看着我随便点一个,你会发现它是string。那问题就来了,那我们通过ID传进来的值呢,它自动的什么把我们转换成number了。还转换成了。那这这转换成什么了,转换成字符串了,那你拿一个字符串呢,跟原来的number去匹配的话,肯定匹配不上。肯定匹配不上啊,所以我们要想办法去处理一下。
09:00
对了吧,来去处理一下,那如何去处理呢?那就是很明很明显把它什么再转回成。什么样啊,你比如我这乘以一再转换成number啊,那这个时候呢,我们再看一眼。你看这不就好了吗?啊,没有问题,好的,那现在啊,我们这做完了,那这一点呢,大家要注意啊,你通过这个ID传参。啊,我们通过这个ID向这个的对象。哎,传三的时候,哎,如果呃传传的是number。那么它呢,会自动的转换成什么呀。啊string,那这一点呢,我们一定要注意啊,一定要注意好的,那这是这一种方式啊,刚才呢,我们通过的是ID穿插,那其实我给大家换一种啊,看着呢,我在这里呢,我再写一个贝塔杠ID。
10:01
哎,你会发现我现在用咱们之前另外一种方式,对吧,Data杠的形式去传,那这个时候来我们。把这个注掉,嗯,我们在下面呢,再换一种啊,那就let NAV ID等于点turn target,点哎,Data s.ID。看我是不是接收的是登上杠传进来的数据啊,这个时候大家要注意啊,我不写这个乘一,我们看一眼。过来你看回一点。是不是也是好的呀,也是好的,那这个时候要注意啊,通过这个贝塔杠的形式传进来,它是不帮我们转的,如果说通过ID传进来,他帮我转这个string啊,这一点呢,咱们要注意啊。好,那现在呢,我这儿还得写个乘一。呃,是不是才能好。来重新编译,我们再来看没有问题,那么这个乘以一,哎,它呢可以转,那其实还有一种方式,你比如说我们这儿呢,可以用这个啊,位移硫酸辅,我让他用移临位啊,大家看着啊,这个时候呢,其实也可以。
11:05
没有问题。啊,那这个右移零位代表什么意思?首先你得知道啊,所谓的位移运算符是干嘛的?那我们。呃,来到我们项目这,啊在这里呢,我给大家扩展一下吧,啊在这个下面呢。哎,我们去整一个test文件夹,整成test吧啊。好的,那么在它的下面呢,我们新建一个JS文件吧,啊,来个index.gs。啊,那刚才我们看到的这种啊,其实还有一种是这种啊,那这个呢,叫位移用三伏。啊,位移啊,运算符,嗯,那分别代表的是右移和左移啊,什么叫位移运算符呢?嗯。我给大家举个例子啊,你我let这个number啊,假如说啊等于三,那么它的位移运算符,你看我要看到这个number,假如说右移两位的结果是什么。
12:05
首先他会将这个目标数据。那先转换成。什么呀,二进制,然后。啊,移动指定的位数。那指定的位数,那现在呢,我们要先将这个number呢转换成二进制啊,比如说是个三转二进制,二进制的话,我用八位表示上去零零啊,四个零,然后呢,零零应该多少幺幺对吧?啊,这是NUMBER3的二进制吧。没有问题,那么接下来我们是不是让人家右移零位啊,啊,右移两位,那他就会拿着这个东西好往右走。一位两位,哎,移动到这儿了,移动到这儿了,你会发现这两位是不是移出去了,移出去了就不要了,然后呢,剩下的不够的位数呢,我们用什么呀。诶。用这个零补齐。而这个呢,就是最终的结果,所以number如果说为三的时候,右移两位的结果应该是多少?零,那如果是右移一位呢?
13:10
啊,如果是右移一位呢,右移一位。嗯。给它放到这啊,那就是我们挪到这儿出去一个一对不对,那然后剩下的这是不是用零补齐啊,前面用零补齐,那最终的结果呢,那其实就是一。对,就是一来我们看一眼是不是这样的过来。好了,那现在呢,我们弄的啊,呃,这应该是inex.GS走大家看上面的结果呢,分别对应的零,嗯,那一。哎,没有问题,这就是位移右侧符。OK,那么知道了这个以后呢,我们再说啊,刚才我这是不是写了个又一零位啊。啊,这个呢,大家通常能在别人的源码里面啊,一些高级代码里面看到。右移零位,可能有的小伙伴就想了,那你这个右移零位其实根本就没动,那显它有什么意义呢?来那这里呢,给大家说一下,那这个右移啊,这个右移零位吧,或者左一啊一样的。
14:08
呃,啊一临位,嗯,那这个呢,啊,会将。啊,我们的非。Number,哎,数据呢,强制转换成。Number。这是它的特点啊,这是它的特点啊,强制的转换成number啊,但是呢,你原本的值不变,所以这个时候大家看我这又一零位以后呢,它自动就变成什么了number了,嗯,没问题,那这个呢,就好像我们强制转化成绝对木值是一样的吗?用两个感叹号。对了不,哎,那就是这个啊,那这一点呢,作为一个扩展大家了解就OK好了,那现在呢,我们这个NAV ID已经搞成动态了,并且下面框呢,也是动态的切换显示,但是这个时候大家看上来的时候没有。
15:02
我们上来是不是应该让他写是第一个呀,那也比较简单啊,比较简单。来,我先把这个控制台就关了上来,如何显示第一个呢?那你要注意当初我们在拿到整个数组数据的时候呢,这个时候呢,我们就可以提前的把na ID去给它更新一个有值的,那这样的话呢,它初始化是不是就能显示第一个呢?下边框,那这个数据呢,是谁呢?啊其实就是这个数组,那这我们直接通过中括号去零。是不是写到第一个对象直接点ID就OK,来保存一下啊,我们再看一下效果。这个时候大家看。是不是就好了,诶没有问题啊,OK,那以上呢,就是这个导航数据的一个动态显示啊,在这里呢,有一个小坑,就是我们通过even,像这个E点击事件的even对象传参的时候啊,如果说你用的是ID这种形式传过来了,一定要注意它会把你转换成什么字符串,你还需要手动转回来,用对塔杠的形式呢,就没有这个问题。
16:07
好的,那这节课呢,我们先讲到这里。
我来说两句