00:00
那我们来去把那个底部导航的那个组件创建一下。啊,这个底部导航它本身不需要跟Du交互了,是我路由组件里面一个局部的一个组件,那也就是说我会把它定义在什么呢。这个这里不能看到啊,那我需要给他是不是去取个名字告诉我。你来给我取个名字。啊,叫什么取名字啊。底部行吗?可以可以,我写的这。能看到吧,那个。
01:00
来,那我就来一个,你叫负也没什么太大问题啊,负level负的D什么GXX好这个地方得就得说一说了,我当前这个组件啊,当前这个组件它啊,先把这个写一下level photo,它是不是需要有一些图标的显示啊。有吧,刚才看到了吗?是不是这些图标,那怎么办?把这些图标啊,这个图标就是我这个组件使用吧,所以干嘛。在我的,因为好几个啊,有好一些图片,那我就这里面建一个文件夹叫images,把它放在这里面,到时候我们是不是去使用啊。能不能看懂,能看懂吗。好能看懂之后,下面要说啊,我的这一个要显示啊,需要用到一个什么结构呢?看一下我们最终的一个,嗯,我们显示的一个效果来啊,这地方我就去,嗯,随便搞一下。
02:13
就这个呗,大家看一下啊,看一下这是我们底部,那这个底部呢,它需要用到安D的。组件标签那肯定要用到,不然的话不可能这么轻松的显出来,对不对,我们来大概看一下。啊,图标呢,我们是不是已经导入好了,没有太大问题啊,来说一下我们这里面有一个。叫什么呢,Table?爸。Table吧,显在底部的啊,Table里面呢,有什么呢。有什么item item是吧,某一项,然后我们的导航有几项?显示的是三项,但一共应该有四项。
03:01
对不对,一共有四种可能性对不对。但我只是一次显示三个。那这个组件怎么用,其实也很简单,嗯,大家看一下,我为了能够就是提前准备好,我提前把这个打开了啊呃,Table,诶我这个就是这是卡片,这是我没有用的啊,好像那个没有打开,我打开一下。找一个找一个,嗯,不能把这个干掉啊,我们找一个,这一个是叫刚才叫什么呢?Table。你知道它访问快还是慢啊,如果慢的话,咱就自己看我们的文档,这个估计是有点小慢来不用管它啊,我们只要知道先知道用它就行啊。来,我们还回到我们这里的分析啊,回到这里的分析。
04:03
那也就是说我们先把我们需要用的组件先给他什么先引入进来可以吧,这应该是没问题的,对不对?From谁on mobile。叫什么?Table,而table里面有什么,是不是有艾吗?啊,那我可以为了能够到时候写名字写的简单一点啊,我就这么写啊,不是不是不是啊,等于叫table8.item,到时候我写标签名,是不是写这个标签名就可以。好,那也就是说我们的整个界面其实也非常简单,怎么搞的。返回一个。这能不能看到,而里面有什么,是不是好几个item对不对,但是item显示的时候需要指定一些属性数据。
05:04
这个不知道大家能不能懂,譬如说它的图标,它的文本,我的图标有两种。啊,未选中的,选中的还要告诉他我什么时候选中。对不对,而这些数据啊,这些数据,譬如说我的图标啊,我的文本在哪呢?我要显示几个item呢,在哪呢?这数据谁来告诉我呀。对不对。我自己本身肯定不知道对不对,懂不懂我这个level foot是谁的子组件。Main main里面是有数据的,就它。这能懂不就他,所以我应该怎么做?我是不是得想办法将这个数据传过去?
06:02
N吧。我只有将这个数据传过去了,那后面我是不是才能够去那边去读这个数据。去产生item对吧?来,那我们这个来先写在这里啊,先写在这里,因为写不下去了,所以我得先用一下。叫什么from啊,点点斜杠,点点斜杠component下面的什么never foot never foot对吧?好,下面我要用一下啊。我要用一下不用在这里吗。知道吧。知道吧,刚才我们分析了一下,需要向他传什么。传哪个数据?
07:00
是不是never least?我现在手里有没有never?有,那我就写什么never list。等于谁,Never?能不能看懂,能吧,好,那有了level list以后,下一步我们要在这个组件里面是不是去接收,接收之前先等于什么,是不是声明,这个事情咱做了好多遍了啊,声明等于。需要去引入一个叫什么prop type这样一个类型,对吧,Pro proper,那我们要去。接收的属性名叫什么?Never list,它是什么类型,什么类型数组对吧。
08:06
是什么必须的?可以吧,肯定要传啊,你不传过不下去。能不能好下面啊,下面我在渲染的时候,是不是要读这个数据,对吧,怎么读。那我产生是不是根据它来对不对。能怎么办?我不要跟他来去便利吗?来便利怎么做打括号,它点什么麦箭头接着了。啊,要返回的是一个item对吧,返回item来这样啊。写一个它可以吧,接着返回来就他呗,哎,这里面应该有个对啊,现在有一个什么,这写的有点不太对。
09:06
应该是我这个地方啊,A map括号这样写是吧,这样里面是什么呀?Level还有什么index有没有看到箭头。小括号这个里面是不是写我那个标签结构啊,因为这写的小括号就能写多多行,写起来好看一点。是不是这意思能看懂吧?好,那能看到下面啊,重点是不是要给item指定一些属性来让它能够有好的显示。对吧。能看到吧,啊,这个里面至少应该有K吧。可以写什么呢?Index,其实我有时候真正如果你有别的标识,就用别的标识,能不用index就不用什么意思了,就是如果我没有我这个数据,我这个数据本身没有标识,那我就用index就可以,那如果本身有标识,那就用它自己的标识,我自己有没有标识了,那肯定是有的,你看我们每一个level,它的pass肯定不一样。
10:21
Pass一样吗?那肯定必然不一样,这个能不懂,或者说我们从后台数据库里面获取的数据,那个数据是不是都有一个下滑线,ID有不有,他的建议是,如果你这个数据有自己的标识,那就用自己的,如果没有,你就用index。我就两种方式都该用用,前面不都一直用index吗。我用一下pass啊。好,关键是后面的一些东西怎么指定对不对,这个不懂,那后面怎么点指定,得看什么去,是不是得看文档,那它打不开,我们就直接看这个得了啊。
11:00
来每一个我们都要看懂,第一个开什么东西,是不是那个我们那个导航的那个文本。这能理解吧?要能理解啊来我们因为比较多,所以我们就写在下面。拍是多少呢?Never点是吗?是抬头吗?我never也要抬头,是T的,因为我们那你们太到选在的是哪里的。是不是头部,能不能啊头部啊好,继续往下看,下面一个呢,叫icon。什么图标,Selected icon?选中了图标icon,诶这个也比较特别啊,这个也是文档里面说的意思,这个里面呢,需要传的是一个对象,对象里面必须要有一个属性叫什么呢?UI是它固定的一个指令方式,而后面指定就是我的那个图片对象。
12:04
什么意思?来,我给大家写一写,大家能懂啊,你照着文档做的,其实也是,这里面需要有一个属性叫什么。是叫icon。等于啊,首先得写个大括号,这个大卦代表什么?我下面要写GS。对吧,而这个JS我来传一个什么对象。而对象里面有个什么,接着要去加载我这一个level所对应的那个图片对象。我里面只有一个东西,什么东西呢?大家看一下数据。Icon,这个icon是什么值?图片文件名。你们看。比如说这个,比如说这个对吧,那下面我应该根据这个来看去干嘛去了。
13:02
来,我要去加载,怎么加载了,这个时候需要用到啊common GS的语法叫require,动态的去加载某一个东西,那加载路径是多少呢?路径相对路径的写。怎么写点斜杠image下面的,哎,图片文件名叫多少呢?图片文件名。这个时候是个动态的值啊是吧?Never,点什么icon够了吗?不够,点什么PNG能不能看到,好,他除了这个icon还有一个什么select的icon对吧?而子写法跟这个什么很类似。等于就是这个吗?
14:03
来等于他呗,稍微给他改一改是吧。不这个意思吗?稍改改什么呢?也就是说我们这个文件名大家看一下是不是多了一个杠selected,能不能看懂,那也就是说我这里面要写什么杠selected点编译。能不能看到。可以吧,可以好,那可以之后呢啊,还有两个属性,还有两个属性,这一个用来干嘛的了,用来标识当前我这个item是不是应该被选中。选中和不选中有啥区别?选中我的图片不一样啊,我的字体颜色也不一样,对不对,尤其是这个图片,你看我不直接两张图片吗。
15:00
而到底选不选中看什么呢?看我的这个值啊,我的这个值是否为,比如说我要写个true什么意思,选中,那我告诉你都选中了。能不能那就都选中了,这样好嘛,那肯定不好嘛,是不是我们希望是某一个选中啊,那到底哪个选中,看什么东西。看哪些数据?首先肯定是要看一个东西的,这个东西肯定要看。是吧,还看什么?我请求访问的那个路径是多少?这很关键,是不是?能不懂,我请求访问路径跟它的这个路径是否什么相等?关键就是我请求访问的路径怎么得了?咱看一下是不是得过呀,前面咱怎么得的呀,还记得不,我要得到一个pass是吧,怎么得来着,Z pro history不是history好像。
16:17
点pass,这是我什么请求的pass对吧,而这个请求的pass。需要跟谁去比较啊,点什么pass这个能不能懂?能理解吧,好。现在我要告诉你,这个语法读不了,Prop里面根本没有这个。为什么这么说呢?我要先说什么时候它才会有这个属性路由组件。哥们,他思路由主页吗?那foot是路由组件吗?不是,你看你的用法你就知道它肯定不是。
17:01
你是在这用的。对吧。路由组件是这么用,对不对。那不对。那这搞不定了是不是。好,来这个地方,你是不是希望在非路由组件里面去操作路由组件API?你是不是有这样一个期望是吧。啊,干嘛了,希望在什么非路由啊,路由组件中访问或者使用吧,使用路由啊库的什么。API是吧,不管你使用哪个API啊,反正你是要使用。怎么解决这个问题,对吧,怎么解决问题。啊,其实非常的简单。使用啊,路由组件库给你提供了一个函数。
18:06
将微之入。就这样一个函数,我们来先引入一下用,我们就知道这个肯定开始是不知道的,所以我就直接告诉大家啊。但是你先一定要心里记住这个需求啊,我我有什么问题需要解决啊。这个函数怎么用呢?有点像connect,有点像connect,需要对我当前组件进行一个包装。返回包装的组件,你说我该怎么做,我刚才说过了,它是一个函数,对吧,那肯定得去调用。那包装谁了?不包装他吗?能不懂啊,记住了啊,向外什么呢?暴露啊,With route哎,这里面是不是多写了?
19:10
看他是有R还是没有啊,我这没有太记啊,有R是吧?嗯。有啊,我怎么总是记得没有啊,先先用上再说啊,用它呗,来啊使用它,嗯包装。产生的主见。其实跟的想法是一样的,你说我们本来这个组件肯定是没有没有那个那些pro的对不对,但是我现在是不是需要啊,需要怎么办。你说它包装产生的这个组件会干嘛呀?会将他能看到的API这什么传给他呀,刚才跟我们前面说过,那个容器组件和UI组件之间的关系是一模一样的。
20:03
好。来啊,有了它以后啊,你说包装以后,后面就有什么样的结果。我的这个组件就会接受一些特别的属性,什么history,什么location,什么match。是不是三个属性就会传入进来,这能懂吧,啊,这个能理解啊。也就说内部会干嘛啦。会向组件中传入。一些啊,路由的路由组件特有的属性,路由组件特有的属性哪些啊。不有那三个吗?哪三个history还有什么?还一个much,后面我们可以看一看就知道了。
21:03
这样想下来,一定要想想清楚,这一个搞法其实就跟我们connect是一样的。其实传的东西不一样。好,这是这个还有一个。还有一个叫on什么什么意思。当我按下去的时候啊,我是不是得去,譬如说举个例子呀,你想啊,当我按下它的时候得干嘛呀,是不是我得请求某一个路径。能不能看到。啊,我得切换路由啊。对不,那此时啊,我在直接在这里写的了。是不是要去跳转路由啊,跳转路由是不是运用到它的一些API啦,写什么Z时间,Pro时间,接着这一次要调history。不跳整路由吗?点那就看用push还是吗。
22:04
你说你要不要把前面的状态给留下来,要不要能够回退,也说白了,我从这跳转到这,我是不是可以从左边这里点一下回退就回退,需要吗?不需要,为什么。对呀,你就可以点下面啊,这不很直接的事情啊。你下面就是让你点的。对吧,为什么还要这上面的东西干嘛呢?没意义啊。你姐上面还费劲一点。懂不懂啊,没有必要,就是这这几个切换没有什么太大必要啊,哪一个点什么replace。那请求的是哪个路径呢?你点谁就请求谁呗,那到底请求谁呢?这两种吧。没懂。
23:01
啊,一共就这么些属性啊,好,我们先看一看,现在还不完,还不完善啊,还有一些问题啊,不完善先看看,都不知道报错没有是吧,得看一看啊。好,现在呢,都还有一些,还有一些问题啊。什么哎,我先把我先把这个问题先先先把它屏蔽掉。我们先看一下我们的,我把这个先删了,我们先先登录一下,删了这个。啊,我先登一下啊,先登一下啊,我好像应该AA吧试一下,嗯,密码是123是吧,直接点击登录呗,是吧。好来现在呢,我们应该说有几个问题,大家都能看出有几个问题啊,有两个问题。一个位置不对。
24:00
是吧,应该在什么底部。对吧,还有什么,还有就是这个显示的多了一个。对吧,得有个过滤,也就现在我是不是以老板登录的,也是显示是个,那应该那个老板这个上边那个。这个对呀,这个大家看看这个啊,就去掉一个对吧,我老板呢,就应显示大神嘛,是吧,就这个要去掉,假设我是大神登录它也是有问题的。一样的,他现在根本就没有过滤嘛,懂不懂。能理解吧,好,那下面我们来去解决这里面的问题啊,先把这个。
我来说两句