00:00
哈喽,大家好,我是霍程亮,非常高兴和大家继续分享和学习关于APP开发的课程,那么我们在下一节课呢,咱们已经实现了啊,下面有多少页由上有多少个影像卡来决定,对吧,那么我们。那上一节课到最后也只是实现了一个数量上的同步,可是你没有办法实现让它内容上的一个同步,对吧?我们这节课要实现的一个功能,就是说你上面点击一个京东,然后这里就跳转到那个京东的一个了页面,那比如说我们这里第一个,那我们点击课,它给跳转那个第一个,我们点击第三个,用它点跳转到第三个,对我们想要实现的是这样的一个效果。好的,那么我们,呃,这里有这个边框啊,看着比较丑,因为你看这边框拉到这的时候,他就给它拉拿了一下,看着有点丑的,把这个边框先给它去掉。呃。对吧,这个边框是在哪,咱们是在首页进行的设置,对吧,咱们首页找一下和边框有关的,就是它红色绿的。
01:07
我们把它。暂时屏蔽掉,然后我们再给它保存一下。对吧,边框没了看就顺眼一点了,对不对。那么这个呢,肯定是双向的,嗯,当我们点击上面的时候,下面会动,当我们滑动下面的时候,上面也会动,对吧?这就相当于是两个步骤,咱们呢,先实现,呃,滑动下面,上面也要动,先实现这样的一个效果,那么你想要让它滑动,咱们是在哪?是在list里边对吧?Swe是实现一个滑动的一个效果,对不对,那么我们就要在这里面给它一个事件啊,就是当它滑动的时候啊,会触发一个什么事件,得得得得得。啊,我们在这。
02:09
双引号引起来。之后我们点击一下保存。这个时候呢,我们滑动啊,没有任何变化,因为我们还需要对它进行一个处理,咱们现在这里边儿什么东西什么都没写呢,对不对。咱们之前也说过,像这种事件,咱们写在哪儿,写在方法里面对吧,那有人说,哎,我这没有方法,没有方法你就写一个方法完了吗。然后打括号。限制对吧。小括号。大括号打开。然后我们。
03:01
格是换一下啊,这里可以对齐一下,应该是这在date啊,这在这个。对吧,因为它都是属于一个script。里边,然后。设置上面是一个导入啊,这里是一个方法。对。好,我们现在点击一下保存。这种报错就是少了个逗号,上边有个逗号给它加上。对吧,没有问题,加上逗号就没有问题了,之后呢,这里的改变我们先来一个最简单的,咱们给他输出一下。呃,输出个什么呢。咱们在这啊获取一个,比如说E这里面呢,就来一个。
04:02
输出的意思,然后名字我们可以写随便,这就是给自个看的日志就是。这里是。滑动。外的时候。的日志,好,我们现在点击一下保存。然后我们看一下审查元素,我们把它拖住窗口看一下。在控制台,我们把它清空。这刷新一下。上面的没有用对吧,咱们现在主要是滑动的时候滑动了,诶这就出来了再滑动。在滑动,那我们看到这里是滑动的日志,就是我们写一个它这个E里边都有什么呢?把这个视角打开啊,这就是我们这边的E。对不对。
05:00
到头了啊。我们这样看,你可能就能看出来区别了,主要看的是什么,这是零。这是一。这是二。三。对不对,那么我们想要的就是它,用它来获取到这个ind叉,就相当于数组的这个索引,对不对。我们再滑一下,这就就变成一了。对不对,我们再擦一下,这就变成二了。对吧。好,那么我们现在想要实现的效果呢,是下边控制上边,咱们现在划完之后。你划到第几个上面,就第几个显示颜色是这个粉色对不对,那么我们先回忆一下,我们现在默认的呢,是第一个对不对,你想一想这个第一个的这个颜色是在哪里进行了设置。
06:02
我们在首页里面啊,弹性布局,咱们找到这个选项卡是它对不对,是在这个table list这里面我们进行的一个设置,我们找到table list的自定义组件。啊。这个里边。之后呢,我们这里面有很多个,对不对,有一个循环有很多个,那究竟哪一个会显示带色的,咱们是用它来控制。对不对。它是零,所以说这里是第一个,当它要是一的时候呢。这是哪个,点击一下保存。对吧,这是第二个汤汤,这个是第四个。第五个这是四的时候,那么就是第五个进行了一个颜色的高粱,为什么。因为我们之前老说嘛,在E语言里面,你数组是从一开始,而在JS里面,就在咱们写APP里面是从零开始,零是第一个,一是第二个,二是第三个,三是第四个,四就是第五个,对吧,那么我们现在想要。
07:10
让上面的和下面的对应,那我们都已经知道了,咱们刚才都已经通过这种方式获取到了这个ID,对吧?我们都已经获取到餐,那么我们直接把这里的这个数改成我们刚刚获取成的这个数不就可以了吗?对不对,那么怎么改呢?啊,所以说我们现在就需要又分为两个步骤,第一个步骤呢,就是先我们在滑动的时候获取了这个索引,对吧,咱们获取这个索引是在这里。是从这里进行的一个获取。对不对,滑动的时候这个缩写,那么我们要把它传给咱们的负极,它的负极是什么?是I它。对不对。
08:00
那么。再从负极再传给上面的这个table。大家能够理解吗?就是说先从这一块。传给整个首页。然后再从整个首页控制。这个选项。啊,就是这样的一个大体的逻辑。所以说我们现在呢,在list里面,我们在这。可以行。做一个变量。我们现在想要的是什么?他对不对,就是这个。你把它复制下来,用这个名字。我们在这一个变量。
09:13
之后等于。E。点。对吧,E是什么,E就是我们上面所得到的这个返回,那我们返回的内容呢,这边也已经展示出来了,就是这些。对吧,这些都是我们的返回,我们想要的呢,就是其中的这个。一态啊,就是这一块。之后。一米对吧,这个是咱们之前也说过的,从子往父传啊,用的就是它。对吧,重复王子接收用的是P开头的。
10:03
那个单词我们现在在这儿呢。咱们要收的。咱们要发的。然后发送给谁。比如说咱们是叫做叫什么来着菜吧,好像是。啊,这还没有写是吧,那我们。OK,那么现在呢,我们就已经把获得到这个消息给他传了回去,传回到这头之后,人家子给你传了,那你是不是就得来个接收,对吧,你是从。哪里传的,List里边传的,那你就要从list里面进行一个接收,对不对。
11:06
好,我们找到黑色对吧,那人家。给你传过来了,你总不好意思不收吧?OK,那么这个change呢,就是我们从这头给他传回来的change,对吧,CH这边也是。之后,对于这个change的事件,我们又需要对它进行一个处理。在这里。这次别忘了逗号,咱们经常会忘了逗号。打开。那么我们在这里,我们想要的就是要的是它。
12:09
这样这样复试应该就是指。之后我们输出一下。在保。之后我们清空一下日志,然后咱们这边刷新之后,这些也是没有用的,我们现在滑动一下。对吧,滑动。滑动滑滑动滑动滑动滑动。那这个时候就已经可以获取到我们想要的当前序号,对吧。
13:05
句号。那么这里面呢,上下肯定是一样的,这里是三,所以说这里传回来的也是三。然后呢,我们都已经得到了这个三。接下来所需要做的是不是就是把这个。三给它复制到。这个里。复制到这个table复制到这。对吧。啊,那么我们呢,已经获取到了这个数,这个索引,咱们就需要再把它给它传到这个table里边啊,我们找一下和table相关的是这个对吧。那么到这呢,我们我们再给他加一个。
14:11
这里加上引号。呀,没了呢。加上一号。好,那么接下来呢,我们就是需要对它进行一个监听,对不对。这里啊,咱们需要给它复制一个初始值。比如说是零啊,就说是默认展示的是第一个。啊。啊,因为我们现在呢,在里边给他写了一个四,对吧,咱们在这里面写了一个四,所以说呢,这。
15:00
他会走第五个。那么我们现在是想把。他。和他。连接到一块儿。那怎么找?非常简单。This。然后。咱们刚才起的这个名叫什么来着。Index对吧。点黑table打一个点它出来了之后,等号等于什么,就是等于它对吧。这样呢,我们就已经实现了。通过滑动,然后获取到一个索引,然后把这个索引从子传到父。然后再从负。
16:00
给它赋值给table index,这table index呢,就是我们将来要把这个table index传到。这个标签栏里边。啊。对吧,那么现在呢,就把它传到标签栏,我们给它往里面传了,那你就得从外边收对不对,你在这边就得收一下。那么我们他想要收对吧,传单传进来用的是它,我也说很多次进来的用它出去呢,用DOLLAR1米的对吧,这是出。这是这是。传起来的电量,我们就是要放在这里。之后咱们传进来的叫什么,来看一眼啊,叫做。然后冒号。打括号打开这里呢,我们也需要给他一个类型以外。
17:01
对吧,这是什么类型,一个索引是一个数对吧?Number。然后这里也给他一个默认值。零。对吧,那现在呢,还是没变化,因为你你虽然说已经。根据滚动收到了,但是你现在收到的这个东西,你还没有把它给复制到这里,对不对。那么现在我们能不能直接把它写在这儿?不行对吧,因为你这样写的话,它就等于是半写死了,因为我们后期是根据他的用户操作,用滑一下就得变一下,是不是,那我们在这呢,就需要用到一个新的。叫做监听。监听事件。
18:16
用什么wa?对吧,下面有简单的介绍啊,一个对象键是需要观察的表达式值,是对应的回调函数值,也可以是方法名或者包含选项的对象。对吧。那么,我们要监听的是谁?是他。对吧。当它变化的时候。我们需要进行什么操作,咱们先把它输出一下。
19:06
输出的值是什么,咱们在这里就是变化嘛,就是变之前跟变之后的对不对。哪些法应该是?先是新。逗号后面是九。之后这边我们就把上面获取的这个新的和旧的都给它打印出来。保存看一下。
20:00
右哪少了个逗号啊,看一下38号。是吧,之后呢,我们。审查申诉控制台把这些没用删除掉。我们现在。发动一下。发动一下。滑动一下。对吧,那这个时候我们就可以看到3221,那就是说现在是三,原来是二,这个呢,就是现在是二,原来是一。对不对。再发一下,现在是二,原来是三。也是一样。这次到时候没得划了啊。但是说咱们不能说光打一个日志对吧,你现在看这日志没有问题了,那下面你就得给他进行一个赋值,对不对,就得把它。PN.a。
21:00
对吧,序号。负值把它的值。给他一个赋值啊,就是上面这个新的。对吧。就是把它的值赋值给它。然后我现在在保存。看一下。对吧,那个时候你就会发现它已经能够同步动了,下面动了,上面已经跟着动了。对不对。好的。那么我们这节课的上半部分就算是完成了,对吧,咱们分为两个部分,第一部分就是滑动下面的时候,上边会跟着。咱们就完成了第二部分呢,就是当我们点击上面的时候,下面也会跟着做。对吧,那么我们想实现这样的一个效果,怎么整。其实就是把我们刚才这个思路啊,给他反过来就行,对不对。
22:06
这边呢,其实道题我们刚才要简单一点,对吧,我们先来导一下刚才的思路,咱们现在呢,是希望点击上面的。对吧,然后下边会跟着变,那么你我把它清空一下,点击上面的时候,你会发现它这里呢,已经有一个日志,这个日志是我们之前进行了一个。日志展示,咱们上一次呢,就已经实现了一个一半的一个工作量,怎么说呢,你现在按照之前那个逻辑,你点击的时候,它会变成一个颜色,对不对,那么我们找一下你在顶部选项卡在table里边。你点击的时候会变颜色看一下啊。这个文件。变颜色应该是一个对吧,在这。
23:04
我们之前已经写了,点击的时候会触发一个。事件,然后呢,我们在这呢,其实就已经获取到了一个ID叉,也就是这个索引,对不对,这个我们之前就已经写完了的,不是钢铁的。我们利用这个ID,上次获取完之后,用他干了什么?我们往下拉。上一次呢,我们是用它和循环的。所以进行了一个对比。对不对。当。循环的这个索引和你现在点中的索引相同的时候,它的。
24:02
然后呢,我们往下拉,你会发现,诶,其实呢,我们已经有了一个。从里往外传,就是从子往后传的一个一米的对吧,那么这个呢,序号我们就已经给他传过去了。那么这个时候我们在这边呢,也接收到了。对不对。Table index。对吧。我们已经在之前就已经实现了一个传出,那么到这个时候截止到现在我们还什么都没写呢啊,因为我们之前就已经写过了,就是在首页这我们就已经获取到了啊,当你点击上面的时候,我们就已经获取到了这个。In,不知道这个索引。之后我们现在想要的就是把你从首页获得的这个索引再给它传到下面的这个,呃,麦克里边就可以。
25:06
对吧,那么我们外边是在这里。我们现在就需要把我们已经获取到的这个索引给它传到这里。这个怎么写?艾。啊,我们起个名字,咱们。咱们在这边刚才用的是什么来着。是他对吧。我们这边也用它。DC。2A。哎。然后。当月。我再看一下,别拼错了就尴尬挑一下。
26:04
OK,然后呢,像这种啊,我们给人家传,你就需要有一个初始值。也可以是零对吧,或者给他传一个初始值是零。啊,现在呢,咱们点击上面下面还是没有联动啊,咱们再来看一下咱们刚刚的点击之后,肯定是能够获取到ind叉,然后呢,默认的ing叉也有了我们。把它。作为一个。参数给它传进去。他这边传,然后在绿色里边就得收,对不对,那我们在绿色里边呢,就得有一个接收。这个接收我们要写在哪?
27:01
啊,刚才少了一步,你这边收之前呢,你还得给它进行一个赋值,对不对,要不然默认的你就是个零是吧,那么我们赋值就是刚刚已经收到了。这里对吧,这是副收到了type传来的信息,Type传来的信息我们收到之后,那么需要。这是第。打个A能出来吗?可以。它就等于我们所收到的。然后我们点击保存,这是我再试一下。现在呢,我们虽然说已经收到了,也传进来了,然后呢,接下来呢,就是要给他再传出去。从index里边,这边我们传出去了,那么从list里边,那就需要有一个接收,对吧。
28:04
接收在这儿要有一个接收。之后呢,我们到这边。接收。也是类型。体外。是一个number,很牛。然后还有一个默认值delo。是一个零对吧。那么这个时候我们也拿到了。对吧,接下来呢,我们就要控制这个幻灯片,或者说叫做这个滚动。就这个wiper它当前停留在第几项,那么我们就可以用一个wiper自带的一个命令,大家还记得吧,因为我们一开始都给人家删了啊,这里当前滑块,当前所在滑块的I叉啊,这是默认自带的啊,这是人家自带的属性,不是说咱们这词不是咱们自个随便编的啊,然后呢,因为它是一个动态变化的,那么咱们在前面就加上一个冒号啊。
29:21
后边就可以写上咱们这个。获取到的啊。对吧,我们现在再保存一下。这个是丰田液,诶,你发现好像下面还没有棉,为什么?因为这里面有冒号,后面配套的就这有一个括号。还是没有变化啊,下面还有一个报错。嗯,那这样我先试一下这个语法,到时候时效了,咱们这里写一个,比如说写一个五,把它保存一下。
30:01
啊,没有问题,他现在呢,写五的话,就跳转到第六个,第一个第二个第三个第四个第五个第六个,你这里呢,要写个二,它呢就会跳转到。第三个对吧。第一个第二个,第三个。那就说这个语法没有失效,那就是我们刚刚。传入的没有问题啊,传入的。我们在这边收到了一个。然后给它传到这。我想一下这里有冒号,这里。我们要不加括号试一下。好,我们现在清空一下。没有变化。正常,当你点击上面的时候,下面也会跟着变。
31:02
嗯,好,那我们找到原因了,哎呀又是马虎了,那么在这里呢,我们刚刚呢,是这样写的啊,刚刚我们又加这个大括号,所以说我们在这头就没有收到对应的这个值。对吧。我们刚刚是这样写的,所以说在这边你就收不到它的值,然后正确的写法呢,是这里我们应该把它。用大括号给破解了。好,然后我们现在在保存,其他的地方都不用动,那其他地方其实都没有错,就是这个地方,咱们帮你把这个收到的直接用大括号括起来。然后这个时候你点击上面的时候就可以动了啊,这也是一个小的一个疏忽。
32:04
好的,那么我们现在再把第二部分,咱们再给大家捋一下思路,那么我们第二部分呢,起初是手动,我们点击这里的选项卡,对吧,选项卡呢是table,我们要在这里面找最开始的第一步。Click就是点击,当我们点击的时候会触发后面后面对应的。这个事件,我们找到这个事件是在哪,是在这。之后呢,我们点击之后,可以获取到你正确点击的是第几个以及第几个对应的值那。我们现在可以把这个索引输出。我们现在可以把这个索引输出,这里是获取的值,对吧,是二。之后呢,我们把。他。进行一下赋值,这个呢是我们之前那节课展示的这一句话的作用,是因为我们要把它变成高亮啊,和我们现在这节课讲的关系不大啊,没什么关系,这是上一节课的内容,然后呢,我们现在把它输出一下啊。
33:15
Pencil table里面这个值。对应的就是他这句话,我们现在获取到的是二,索引是二对吧,是索引是二。之后我们把这个数据,我们有用的这个数据从子传给父啊,用这个命令进行传,就是从子传给父,传给父之后。传的是table对吧,那么我们就需要在table里面有一个接收。我们现在找到table。看对吧,At table等于table,那这个时候呢,我们对table就需要有一个事件的一个接收在这头。这里是负,我们现在就收到了它。
34:03
对吧,然后下面又输出了这个索引。在之后,我们要把这个索引赋值给。因为我们要把它。就是这个索引再传到下面的这个外里面对吧。它等于它。到这个里面。之后我们再进入到列表。人家给你传了,你就要有一个收,对不对,收我们是在这个函数里面啊,在它里面收,我们收了一个。Index这个东西呢,我们需要给它设置一个数据类型和默认值,数据类型是number,就数字型啊lo默认值是零对吧,那么我们。
35:00
收到他之后怎么样?和它进行关联的就是这里。那么就会把。它的值。替换成它,那这个呢,是我们SC的一个特定的属性,它就是指当前的。一个选项对吧,当前展示在第几个,就用它来进行一个展示,所以说这个就是一个整体的流程,然后我们刚刚错在哪了呢?错就是错在我们在从table,从table里面点击往上边传,传的时候,结果你接收的时候,我们忘记给人家加这个大括号了啊,这里是一个错误,然后以至于没有收到数据,你再往里往这个。Map里边传就默认就显示是零了,因为到这这步错了啊,从选项卡往外边传的时候还是有的数据,但是你从首页接收人家的时候,你这个地方你接收错了啊,结果你再往下边的那个外里边传,人家传出就是个零了啊,刚才就是咱们这个地方错了啊,大家呢也要注意啊,这里呢是有这个大括号的。
36:20
好的,那么那这节课所实现的效果呢,就是我们下面滑的时候上面跟着动,上面点的时候下面跟着动啊,就是这样的一个效果。感谢您的关注,我是霍长亮,拜拜。
我来说两句