00:00
哈喽,大家好,我是霍程亮,非常高兴和大家继续一起来学习关于APP开发淘宝课的内容,那么我们在下一节课呢,已经实现了关于咱们在顶部有一个选项法切换,那么现在呢,你点击是点不动的,对吧,你顶多能让它动。但是你点的时候它没有任何的反应,所以说呢,我们的目标的效果呢,是希望能够点一下,然后它这里边高亮,比如说红色呀,蓝色呀,然后呢,下面的内容也就展示和淘礼金,比如说这是选择淘礼金啊,就展示和淘礼金相关的,然后呢,如果说是点击首单礼金,就展示和首单礼金相关的啊,那么这样的话我们如何实现呢?咱们呢分为两步,第一步呢是先来实现一下它的点点重之后显中显示一个高亮的这样的一个效果。那么我们要在哪里改呢?你想啊,咱们现在要改动的是这里这个typeb对吧,所以说呢,我们就找到T所对应的啊,咱们这个自定义的组件。
01:08
找到这里,然后呢,再具体一下说在T里面的哪一个位置。是这。对不对,那么我们这里呢,是已经有一个循环,把咱们读取到的所有的数据库里面的信息都给它循环出来,对不对,所以说我们要改的话,肯定是在这一行里面进行更改。那么。它在什么时候会高亮,在你点击的时候会高亮,对不对,所以呢是和点击相关,我们在这里就要签一个和点击相关的一个事件啊,点击用什么按。对不对,那在这里咱们要给这个点击的事件起个名字,比如说叫做。Click time这个名字呢,还是随便写的,你自己记得住就行,咱们用它来当做点击的事件的名称,好我们点击一下保存,那么这个时候呢,是没有任何的变化的,对吧?因为你只是起了个名,但是这个名意味着什么,代表着什么,你什么都没写,所以说呢,我们在下面需要对它进行一个处理。
02:20
那么我们这种事件要写在什么地方?写在方法里面对不对,然后呢,我们看了一下,诶,在script里面,它默认的只有一个date,但是没有。那怎么办啊,没有的话,我们就手动给他写一下不就完了吗?对吧?啊,我们在点下边。方法,双击。然后啊,写我们的点击事件刚才起的叫什么名字来着。CL。
03:02
看对吧,这是咱们刚起的名啊,然后呢。加个括号。然后一个大括号打开,那么我们就要把你点击的。事件写在这里,就说你点击之后,你想要让它触发什么呀,想要让它点击之后有什么变化呀,对吧,你就把这个点击之后的变化写在这里。那么我们点击你从数据的角度来说,你是不是点击哪一个,它是需要根据你这个序号来判断咱们显示哪一个对吧?比如说我点击第二个,然后你就显示第二个数据变成高亮,所以呢,我们得先获取到它的序号,对不对,我们在这里呢,可以传一个参数,比如说。然后再来一个序号。同理,我们在这里。
04:02
有,那么在上面这里也就需要有。对不对。我们在后面也给他加上个括号。好,那如此的话,我们这边呢。Item STEM ID叉、MD、差,它们代表什么意思呢?这个呢,相当于是咱们数里面的元素的值,而这个ID差呢,就相当于数组里面的序号,比如说是第几个对吧?假如说这里是一一,那就相当于是第一个元素的值是一,如果说是张三一,那就第一个元素的值是张三。明白吧,是这样的一个逻辑,然后呢,记住网凡是click下面带的这个函数啊,我们都是写在script下面的方法。里面。好的,那么到这儿对吧,咱们从这个位置。你读一下这句话。
05:03
当。点击。当点击的时候触发了。这个函数。触发了这个事件,然后呢,这个事件我们里面有两个参数,这两个参数一个是。你点击的是第几个,另外呢,就是你点击的这个的值是什么,对吧,之后我们在这边。传参传入了一个点击的序号,就点击的第几个以及点击的第几个所对应的值之后,我们现在把它cancel一下,就输出一下。好,我们现在保存。啊,这种十之八九又是少了个逗号啥的,我们看一下。发图。
06:06
加上我们再保存。好的,那么现在我们来看一下,在这有没有将它进行一个日志输出啊。审查元素,然后控制台,然后我们清空之后,咱们刷新一下。好的,嗯,这样的话,我们如果说单纯的这样写呢,你可能看的不太清楚,咱们在前面再加一个汉字。这里是用来。输出。数组序号和内容。好,我们现在把这清空,然后再来保存一下。
07:02
然后这边刷新。诶,我们在这边好像没有看到咱们写的这个。呃。信息为什么,因为我们还没有点,我们随便点击一个对吧。看了吧,现在这不就输出了吗?然后我们点击一个对吧,为什么这是一,这是三。这是零,这是一,这是二,这是三,这是四,这是五。47对不对,为什么?因为我们之前也讲过,你在GS里面数组呢,它是从零开始,然后像我们以前上一套课程,我们讲一元的时候,一元的速度是从多少,是从一开始,对不对?那么我们点击它的时候,这里显示的就是零对吧。
08:03
那么这里面啊,一个是name,一个是ID,就是我们D0个所对应的项的名字是陶李金,ID是他,那这个ID是什么?就是我们数据库里面这个表所对应的这个ID啊,就是那个唯一值。那么我们现在呢,已经获取到了这个序号和对应的内容,对不对?然后呢,我们现在想要实现的第一步是什么?是希望他能够有一个颜色的展示。对吧,也就是说高亮,那么我们在这呢,就需要给它做一个class的类,但是大家注意了,那么我们前面也有class,我们为什么不能直接在前面的这里面写,为什么,因为这里呢,就相当于是一个写死的。对对,而我们在这里所添加的这个类。我们在后面所添加的这个类,它不是写词,它是一个动态对吧。
09:04
Class等于什么?这样的话,我们就在前面加上一个冒号。对吧,我们之前讲过,如果说前面加冒号,后边你就得加个大括号,这样的它俩是配套的,它是一个动态化。妈妈。然后啊,我们是准备让他高亮是吧,就是活动诶。对。在他。等于。什么的情况下才让他活动。就是当你选中的和他现在展示的是同一个的时候,才进行高亮显示,对吧,那我们在这里可以来一个点亮。
10:14
三个等号就是我们的判断啊,等于。啊,那么这个呢,我们需要在get里面给它一个初始值。对不对。初始值咱们可以是零啊,就是默认的话,它是显示第一个,好,我们现在保存一下。诶,我发现呢,我们现在这里没有任何的变化,对吧,为什么?因为我们还没有对这个class进行一个优化处理。对吧,咱们在这有了这么一个拉子的名,可是咱们还没有给他写,对吧?这活动时是高粱,高粱什么样的呀,是红的,是黑的是白的呀,对吧?我们把它复制一下,然后你看一下它是在。
11:11
这个里面对不对,在这一层里面。所以说我们就要找到,嗯。这里面的一个类往下拉。Active。然后打括号打开啊,这前面呢,咱们还得加上一个负对吧。之后这里面颜色color。然后你可以选一个你觉得好的颜色,对吧。那么比如说我们可以选择它啊,然后我们现在再保存一下。
12:03
现在我们点击。点击它没有效果,但是呢,我们默认那个首页啊,就是默认的这个桃离金,它已经变成了这个颜色了,对不对,那么接下来呢,我们要整个就是能够让你点击之后。这题跟着变化啊,点击哪一个,哪一个就变成这个颜色,我们回到上面啊,我们来看一下。在这里我们可以进行一个判断。对不对这句话。那么刚才他呢?代表什么?代表着颜色对不对。看一下。CRLK就是格式化啊,那么我们刚刚在这边这段代码。读这个代码的时候,它意味着什么?它意味着。我们的样式里给它一个颜色是红色啊,这叫做这这个这应该叫做粉色对吧。
13:05
那么在什么情况下?会执行。把它颜色变成粉色啊,前面这是一个动态的,对吧,当。它等于它的时候。它的颜色会变成粉色。对吧,那么这里面你你想一下,比如说我们选中的是。第零个第一个第二我选中是第二个,那么它在循环的时候啊,第一轮诶不是二,第二轮不是二,第三轮H2了,然后12就变成了这个红色,就变成了这个粉色啊。就是这样的一个循环的逻辑,当你现在点击的和你循环到的是一个的时候,它就显示的是我们这里所设置的颜色,就是这个粉色。那么我们现在要实现的呢,就是。
14:00
点击,然后引导它的颜色变化对吧。那很简单嘛,对吧,我们现在不就是要让它变化嘛,对不对,我们现在要控制的就是它对不对,默认呢是零,所以说呢,是第零个。落实到了这个class里面。啊,第零个默认第零个是这个颜色的啊,是它里面的这个颜色的,那么我们想要现在想要使你点击的执执行这个颜色,那么你就需要使你点击的这里。进行一个序号的改变,使你点击的这个数等于后面这个数,对不对,那么我们现在在。数据里面已经有了一个,它默认是零,那我们就改变一下它不就完了吗?当你点击的时候,这。这个数就是我们现在点击的这个数等于什么,让它等于in比,他就是你传来的你点击的这几个个数。
15:03
然后我们现在保存一下。看到了吧,现在呢,就已经跟着动了啊,这个逻辑是非常重要的,我们再给大家捋一遍。那么我们现在想要实现的目的就是你点击哪一个,哪一个颜色就变成粉色啊,我们姑且称之为粉色吧。我们现在想要实现的这个效果,首先说咱们得先要找到你要控制这个位置,哎,我们知道这边是一个选项卡,那选项卡所对应的呢,就是这个图啊,对吧,这是一个循环。首先呢,我们想要说让它点击之后变成一个什么什么颜色,那么我们得给它一个类啊,在这个类里面。进行一个颜色的设置,我们给他一个类,这个类的名字叫做。然后我们对这个进行一个。属性设置对吧,咱们尝试让它变成粉色,咱就给它来一个拉,等于粉色,好,那现在呢,因为我们这是一个动态的,对不对,所以说动态的我们前面都有一个冒号,后面都有一个大括号。
16:11
那么现在我们已经把这个颜色设置好了,说当什么情况下才会把里面这个字体变成粉色呢?这里就需要有一个等等等进行判断,对吧。当你当前点击的这个号。等于它的序号的时候,它就会变成这个粉色。对吧,你想啊,他这是。比如说咱们这七个啊,他第一个来了一看,诶。不是第二个来了,你看不是第三个来看,诶是那就变成你想要的这个颜颜色对不对,那这个时候又有新的问题了,这个ID叉我们在上面就可以获得到,对吧,那么这点。我们怎么来?默认的值,咱们可以给它复制一个,在return里边给它来一个复值是零,那么按照最开始的读法是。
17:03
这是零,那也就是说你循环的时候,当你循环的这个值等于零的时候,它的颜色会执行和T里面设置的颜色。明白吧,这句话我再重复说一遍,一开始默认的值是零,也就是说这个循环当它循环到第一个的时候。也就是当第一个I它等于零的时候,跟它恰好一样,它是零,它就是零,然后它们俩相等,就会执行后面的这个。对吧。我们现在呢,想要实现的目标是你点击之后,你点击的时候会变化的是什么,就是这个序号对吧,那么我们在方法里面。进行了一个序号的改变。让你。你点击想要得到这个序号,就等于index。这样的话,我们就可以进行一个精准的控制。从而实现一个动态化的实线,你点击哪一个,哪一个才执行这个的class。
18:07
明白了吧?
19:47
咱们在这头已经。获取到了。对吧。已经获取到了这个第几个,然后呢,我们是要把它传给ID。
20:03
明白吗?它就相当于是子,它就相当于是父,我们要从子里面传给父,咱们用什么命令?我们看一下幻灯片,父组件可以使用啊,这句话跟他没关系,可以忽略子组件可以使用这个命令。触发父组件的自定义事件,说白了,你就是从子里面往父里面传,你是需要用它的。对吧,那么我们回到这。这。点。看到吧,复发当前实例上的事件附加参数都会上传给监听回调器啊,就是从此传给负,那么这里我们要传的是什么?Table,然后内容呢,咱们来个大括号打开这里面。
21:02
我们要传的其中一个是序号对不对。对。好,那么现在呢,我们就是已经做了一个关于传出对吧,就等于说我们在这边。把我们所要。获取的信息啊,传回到上一级。这两个呢,都是咱们到这都已经是已知的了,然后呢,我们把这两个值E和RD差赋值给date和RD。然后传到上级。
22:02
他往上传,那么上面是不是也得有一个接收的。对吧,啊,咱们先先把这个取消掉啊,以免说咱们一会测试的时候受影响。这个也有一个对吧,我先给他取消掉。好,那么我们这边人家子给你传了,那父是不是也得有一个收啊?那父的收怎么写?我们找到这边的。对吧,在这我们加上一个对应的。软件。那咱们这边有了一个艾特,那么这个艾所对应的事件,咱们得。正义也就需要有他给他一个注册对吧?啊,我写在这里。
23:16
它的参数是什么?是两个对不对,我们看一下,咱们这一个是date塔,一个是inx。我们这边也是一样。好。那么正常来说在这边就已经能够收到了啊,它这边子typeb往负ID叉里边传,然后ID叉呢,在这里实现了一个接收,然后接收之后对应的时点,咱们干什么,收到之后干点啥呢?比如说咱们在这儿可以输出一下。就是当收到。
24:00
之后咱们可以输出一下,那咱们就直接这两个吧。还是加那个中文吧,啊,一会儿不好看。这里是。收到的。死。传来的。信息。加一个逗号。然后我们现在保存一下。嗯,又有一个报错,我们看看是不是少了个逗号31行。D31号。这里少了一个逗号啊,加上个逗号,然后保存。OK,我们现在呢,看一下这个开发工具,我们想先把没用的咱们给它删除掉,然后现在这边点击。
25:03
对吧。没有问题吧,我们现在点击呢,在。这会里边执行,然后我们拉到最后能够获取到你正在点击的是第几个,然后呢,咱们在这边并没有日志输出,这个日志是在哪,是在这头,是在主页ID叉这里面咱们来的一个日志,对不对,他就是什么,那也就是说我们现在已经在ID叉里面收到了我们后面的这个信息,收到了从开里面传回来这个信息,而且咱们测试没有问题,对吧?第一个点名第一个第二个,第三个,第四个。4321对吧。但是说咱们在后期你收到了之后,你肯定不可能说光打印一下对吧,那么我们可能会根据你所收到的这个。我们可能会根据你所收到的这个ID叉,然后再做相关的展示啊,然后有了它,我们我们先懵懂的想一下啊。
26:02
你你比如说这里是一对吧,你知道了是一,那你就知道这里要展示的是桃李金,然后呢,你就在咱们的下面你要展示的文章里面筛选和桃李性相关的进行一个展示,到时候呢,你就可以做一个判断,就下面做一个判断,说在展示之前一个祭祀循环嘛,当。这个东西是和。这个ID相符的就展现,和这个ID不相符就不展现啊,这个就是后期的一个工作了,那么这节课呢,主要就是讲的一个,呃,选项卡的一个高亮,还有就是获取到你正在点击的是哪一个ID,获取到他的这个索引,好感谢您的关注,我是霍长亮。拜拜。
我来说两句