00:00
来,下面我们来写商品分类的这一个界面。这个稍微啊,还是有点小难度的。先我们用点击上面添加来这里面主要一上来大家看啊,开始默认没有显示什么内容是吧?嗯,因为现在我也不知道是哪个分类嘛,是不是。大家看看,一上来他是不是就有了一个一级分类的列表。那那我要选择的可能不是一级分类,我是选择某一个二级分类,那怎么办。大家看好了,看好大家注意先观察,叫走你。说明这个二级分的列表是什么?动态获取的。看出来了,这跟大家也是一样。能看到不啊,这个地方啊,我也就一级地表,我这边上来就获取到了。二级某一个分类,二级里面是不是你点的时候才去发请求获取。并且展现是吧,当然我选出一个。
01:00
能看到吧。好,那怎么做呢?刚才我们说过,这里面是用的是一个哪个组件呢?开开几点选择来。这里面就有一些基本的效果。但这个效果跟我们的效果还不太一样,因为我们的那个数据是异步获取的,而这个数据应该是一上来就准备好,全部准备好了。这是个三级列表吧?啊,我们比较合适的效果是他的最后一个。看好了。是不是很像?能听到不,那我们很简单,就是参照它去写呗。这能弄吧,能弄好来把它展开。那首先我这一个组件是不是已经引入了。这个这一个大家看一下这个是什么,这一个大家看value,这个是不是因为我们刚才显示这个数据啊。
02:05
是不,这个是用户看到的那个文本,这个是背后的它所对应的值。这个这一个东西不相当于一个窝吗。那我险它是不是有标签体的文本,以及它真实的value?你看到的和你最终他最背后的value一定是一个东西吗?不一定。不一定,对于我们这个来说,大家看到你现在不看到的是什么电脑啊,图书啊,对不对。我现在选择的是不是电脑下面的笔记本,但实际上收集的可不是电脑笔记本。收集的是什么呢?收集的是这个电脑的电脑不是个分类嘛,是他的ID址,也就下划线ID收集的是它的ID址。说白了,那个对应的option。如果它生成O型的话,那O型里面显示的是这个名字,名称和那个value。
03:02
而那个value实际上对应的是我的这一个分类的什么ID?听懂了吧?嗯,就让用户看到和最后背后收集的数据不是不一定是同一个数据啊。这很正常。好来。这个还有这个东西。嗯,主要是这个单词要认识。Lea或者life,什么东西啊,叶子?什么意思呢啊,大家看看,他说这个数据是个叶子吗?不是这个就在于就说。大家看好了。这个后面呢,它还有第三题吗。没有,这就是叶子,什么意思?来看下面的数据。嗯。就是诶,它下面动态加载的数据就没有啊,没有指定,那实际上就相当于是个叶子了,这里面有一个事情,它这里没有啊,没有指就是世界上这地方说个事情就是这个属性。
04:08
这个实训啊,如果是处,就代表我没有下一句了。听懂了吧,那如果代表什么。我是有可能有下一节对不对,所以它的右边才会有这样一个,这样一个什么形状的东西呢,大家看到这个地方就有这个东西。诶,这个没有看到了吗。听懂我这个意思不啊,就是如如果你不是叶子的话,那就代表一个箭有一个箭头,那我点的时候就可以去加载下一点。啊,这是这个事情。好,那我先呢,把这个数据啊,这样吧,我们先拿过来,我们看一个效果以后慢慢再慢慢再去分析。嗯,他是开始把这个数据呢,放在最外层的,但最后我们不是这么做啊。好,接着呢,看到这里它有一个状态,状态的初始值就是这个option数组,实际上就是个数据的数组。
05:06
那拿过来。放在我的状态里面,但最后又要改的,先暂时用这个。我不分号,好继续。嗯,下面我把他的这个里面的这些这些东西有把它标签拿过来吧。标签拿过来再去加载一些东西得了,标签就放在我的这里,放的多一点啊,多发一点,就这个。替换掉我的这个div。好,这options就是要去显示的那个数据的数组,This点是state options实际上找的就是我刚才的这个数组。哎,放在有点上吧。Put on up。三打的越他。我先告诉他结果啊。咱们慢慢再熟悉,好,放在最下面。
06:02
这个load date date什么意思?加载数据,这个对应一个回调函数,这个回调函数是干嘛去的?是加载下一级的数据,什么时候才可以触发呢?就是开始他不是那个没有选来说一下。我再来一遍啊。你看他选中过了。大家看呢,开始我是不是就显示了一级列表。接着我是不是点击某一个一级分类一级项。去想显示它的二级列表,是不是这个时候就会调用水去。数据哪来的?那不就是调用这个load date回调函数来产生的?这里面不就有吗,加载数据。而加载数据,它有一个专门的方法。
07:01
我也把它放在这里。好,那其他的啊,它还有一些,还有一些onch change什么,嗯,Change on select,这个我特殊了,暂时不需要,我们就需需要这两个。当然你自己测试的时候,可能开始不知道,我就不去测了,因为那个根本我们现在用不上啊,我就简化一下啊,主要就这两个,这个指定的是什么啊。需要显示的列表数据,那当然是个数组了,是吧?这没问题吧,这一个是什么呢?这个是去啊指定当啊选择某个啊列表项。加载。
08:01
下啊,下一级列表数列表的。毁掉监听毁掉啊。那接着我们来看一下它大概啊,我们先看看我们的效果有没有啊。首先它上面显示这个样子,是不是打开,诶是不是显示了两个项目列表啊,为什么是两项。是我只写两个对不对,好,我再加一个。我随便加一个啊,现在我有意的把它选。可以不?所以你来看一下会是一个什么样的场景啊?看一下知道吧,走里。看true和first的意思吗?这是不是就是一个叶子啊?那就没有分子了吧?
09:01
那另外两个是不是有可有分支的呀,接着什么时候去load对头了,我一点它,诶这个中间是不是还有一个loading的效果,这都是呃,通过什么方式来做的呢?这时候就得看。它的吧,用于加载下一级。列表的回调函数对吧?好来看一下。这个东西是个什么?Selected什么意思?选择了options。像的什么?宿主吧。实际上只选择一个,他这边为什么放传统的这个数组,因为它的语法是可以允许你同时选两个的。选多个的,它是放在一个数组里面的,其实吧,数组里面就一个元素,我告诉你。
10:01
就写个零就行。能听到不,它这里面是什么数组的长度底减一,那实际上找的就是人类。因为它的长度就是一,所以直接写这个就行。这个什么,这个实际上就是我选中的那一项。我得到的我不现在哎,我去选,比如说我点它,我选它吧,那得到就是这个,我不选数据对象。能听懂吧,那如果我选择第二个,说白了得了,就他嘞。这就是个物品嘛。这是过敏对象,能不能看到?好,接着往下看啊。最后一个很重要。啊,这个是得到啊选择的open品对象,哎,你下面你说这个干嘛。
11:02
点loading。显示什么去了。Loading一下,刚才我们一点是不是有一个旋转的,一个一个loading了,靠的就是谁。是不是他呀。这能听懂不啊,把这些封号都去掉啊,因为咱都不用封号。好,没问题,来,回到我们这边来。这个不定吧,没问题,好,接着你看他做了个什么事。他是说了一个提示啊,就loading options什么意思。是不是花一定时间去加载那个子的子的下一级的。一个我显示对应一个对应一个要显示一个列表啊,我一点它大家看着啊,我一点啊它更新了啊,我一点某一个,它不要显示二级列表吗?这不又是一个option吗。这个是option是吧,右边也是option。
12:03
好。这里面是不是用一个定时器来模拟的?是不是画了一秒钟?说白了那个loading的效果显示了什么?一秒钟接着loading等于first,这是干嘛呀?是不是隐藏那个loading对吧。好记着这很这很意思,怎么样指定某一个项的它的下一级列表呢?要给那个的保险指定什么?Children。能看到吧,自己应该求着。啊好,那children里面,Children里面大家注意观察这个children里面。它这个地方写了一个数组,一个数组不对应我的列表吗?是不是两项啊,实际上它相当于还啊,这个最好是明确的写一下,写这个1LIFE为什么。
13:05
是不是应该没数?没写相当于写了,你说是不是这能听到不,因为他那个上面刚才显示的是不是第二层就是叶子啊,说白了我一共有几集。两级。能听到吧,其实效果还是刚才那效果。要注意啊,一定要是添加为我的这个他O形是什么,求准。这能听懂不来最后需要做一些事情,也就最后的最后一定要干这件事情,干嘛去?你现在不把那个options实际上改了,改了以后,因为这个他的option就是我那个option数组里面的某一个什么。某一个option对象。你改了它里面的数据,需要去更新什么,Option显示数组,Option显示状态,但这更新大家注意这里面用了什么方式。
14:03
重新解构产生一个什么?宿主。嗯。OK,这里面其实变化的是。里面的某一个什么。是不是只是某一个option变了?能明白吧,啊,大家千万尽量不要这么做啊,尽量不要这么做这么做了。就这种后面讲的东西就是这样做不行,这样做不好,不是说也不是说没有效果,这样不好。啊,最好是啊,不要直接去啊整那个数组,而是去。用解构的方式去写,这个大家应该用过。再去更新装备的时候,尤其数理装备的时候用过。啊,好。这是这个。整体应该要能看懂啊,整体需要去看懂。这个实际上是相当于模拟什么,是不是模拟发请求,模拟请求异步获取二级。
15:07
列表数据。更新啊好。最终效果倒是没什么太大问题啊,所以我们相当于现在写了一个基本上算是静态的,也不纯静态的,这里面实际上有一点模拟的效果。好。
我来说两句