00:00
好,那数据有了以后呢,下面我们就是要去想办法将数据在我们的头部做一个显示,也展现我们头部,我们头部的那个效果,看8081。打开它。就这个是吧,嗯,就这个。把它稍微搞大一点。来啊,那显示它呢,主要是要大家也需要去先写一下布局相关的啊,这个呢就不需要去大家再去写了啊,在这里面呢,我已经把那个布局的样式已经都已经写好了啊,因为前面大家已经练过了啊,再花很多时间去搞就没必要了,但后面实战呢,就可能还是需要自己再写一遍。那个时候是完全要需要自己写啊。
01:00
来,那也就是说我们现在呢,找到我们的头部组件,我们已经定好了,叫hand。来啊,大家现在做的事情就是去把这个模板。直接拿过来。哎,这个是样式是吧。嗯,是这个里面既有。模板啊,这就不搞了,这个这这里这里啊静态的,先把这个模模板拿过来,这模板是静态的啊,就是一个页面静态页面啊,好再把它的那个组件的样式也拿过来,但是我的GS还没有怎么写啊,主要后面要想办法获取数据展现,那接着我们来看一下我们整个界面的一个结构。哎。好,我把这个隐藏一下,因为现在挡住了上面了是吧?嗯。
02:08
啊,这个样式其实也不少。啊,我们有有两个需要显示隐藏的。就他好再来看一下。大概是这个样子啊好。站的这个高度是不是有点有点偏高,就先就这样啊,先这样吧。好,那下面呢,我们需要去看一下啊,就我们当前这个界面写好以后啊,包括把你的布局和样式都写好以后,后面我们是要是动态展现数据吧。那你说我先做什么呀?数据时代有没有现在?有在state里面对不对?然后我们现在需要去读数据显示吧,读数显示,读状态数据怎么读port大括号from这个呢?Map state接着comp。
03:20
是吧,接着我们里面有一个点点点map state。取什么数据来着。实际上就是商家的信息是不是。那下面。我们是不是在这里面想办法教他们做一些显示处理啊,啊,这里来看一下啊,首先这个这个很简单。啊,一般我们不做交互啊,先先数数,但是它这个太简单,因为这个。能不能看到那这个这个导航的看一下啊,这个导航的部分看一下。
04:02
就这个部分是吧。那没有啊,来,那我们给他搞一个什么at和ni,直接就写多了福A多了福号,多了福点拜就行。这个能不能懂啊,这个地方,诶这些啊,这是我开始的音呢,开始怎么搞的是一个。我是多少端口啊。8082吧,应该是对吧,啊,我是个808好了看一下。没问题是吧,好点,它是主要是这个这个玩意这个东西。看着不太舒服哈。可以回退,能看到吧,行好,这里有点太,嗯,还不如刚才那个了,因为这有点太小。
05:08
100%。就看见好老师啊,就这样吧先。嗯,好,那下面呢,下面我们要去做的事情呢,是把他们呢,给它数据动态的展现出来,那动态展现出来我们得一点一点看啊,一点一点看,先把这个做完了收起来,这个不用弄。好,一上来有一张image。有一张图片,这个图片是哪张呢?跟大家说一下,就这个背景图片看到了吧,就是这张背景图片,这个背景图片我们要看的数据写。Inform吗?这个背景图像是哪一个呢?看到这个属性了吗?而且它本来就是个完整路径,是不是这个该怎么办呢?这不很简单,这个地方大家看一下我们这四类的背景图,我看一下,我还是看一下这个四类的背景图,好像不是看一下,我得反问一下是吧。
06:10
这是哪张图片?这是那个。是不是商家的那个,那那个图片,嗯,那背景图片,这张图片,这张图片是哪来的呢?这张图片是不可以看一下这张图片,这张图片呢,实际上是它当前的这个文件的一个什么呢?一个样式,也就是他的什么。Background image,他当前写在哪了?写在这个样式里面了。看到吧,那肯定不能这么做嘛。对,不但技术格式啊,它后面那个值是不是ul像一个有类似一个U函数啊。是吧,好,那我把它去掉,去掉以后是没有背景图片的,而我的数据里面是有的,对不对。
07:02
懂不懂我的数学也就他呗。是吧,看一下刚才啊。我刚才当前这里,你去审查的话,就能看到我当前这你看哪个啊。实际上是在这个整个LA上面是吧,在整个LA上面啊,看错了,整个LA上面就这一个呗。是吧,那我要给他加一个什么是动态强制绑定style。能不能听懂好这个对象数其明。还记得刚才我的样式名是什么?Background,是不是本来是image,对不对?那我现在不能写杠image了。有没有看到下面呢。下面是不是一个这玩意啊,但我能现在能这么写吗?
08:05
能这么写吗?那个样式的值是不是本身是个串呢?本身是个字符串嘛,所以我应该怎么整。啊。是不是这么准?能懂吧,当然你也可以写单一号,因为我写它主要是里面有变化的数据要拼串嘛。对不对?而这个值从哪来?是不是in four里面有一个什么啊,我们看到我们这个属性。切换到我们的view。是不是这个。是不是他?单看了吧,啊,这个比较特别啊,这个相当于是是有点小费劲了。哦,必须是什么,多了括号,也就是说是多了大括号不使不行。
09:02
模板字符串嘛,是吧,嗯。那也就是说现在呢,按说来说,我们应该是不是已经有了。哎,这这个才是我们的放大吧,放大看起来舒服一点是吧,大一些。可以吧,可以,那后面的就类似的,而且还简单一点,什么意思呢?这个就更简单了,冒号啊,这个值呢,这个值应该也是动态的,对不对,依然是动态的嘛,肯定在音符里面,只是说它的什么属性呢,对吧,来看一下什么属性。是不是有个阿凡达呀,啊头像嘛。登宝这样不就有了吗?好,这个是固定的,这个不用改,下面这个是什么。是他内蒙对吧,现在我写的大鸭梨,但好像不是大鸭梨吧。啊,In点应该加上一品才对啊。
10:05
能不能看到,因为这里面显示这个字嘛,应该显示。这个不懂,后面的其实就就找对应的属性去显示,其实这个难度一点都没有,说实话。啊,下面这个五是什么呢。啊,应该是一个评分。能看到吧。啊,咋的啦?这不一个评分吗?就是我这个商家的评分呢。什么意思啊?来啊,这个地方有一个有一个平,我随便写了一个五啊。来当前呢,我这里面把它来去写一下,就是in four点它可以选是吧?啊还有一个月售多少单啊,应做点月售多少单呢。
11:02
嗯,这个不是。因为这个是是评价的一个数量是吧?啊,我要找的是月售多少单。是不是这个。没有吧,好,这一个谁来送的呢?看一下谁来送的。是不是有个描述啊,应付点它,你说这有什么难度,还有一个配送的时间大概多长。配送的时间大概多长?是不是delivery什么看可以吧,接着距离啊,大概多远?这是一千米是不是,那也就是说这个啊,距离的距离,后面整个删掉in for.distance。
12:03
能看到吧,啊要能看到啊,这样的话呢,大家看到啊是一个。我们刚才指定的一个值没有什么问题啊,下面啊,下面还有一些。把这个写完了,给他收起来啊。下面这个显示是什么呢?是要做这一部分。这个里面呢,是去显示了我商家一共有几个优惠活动。是不是四个,而这里显示的什么。他一共有四个,他先显示个给你看,听懂不?你等会你点一下,他就把所有的优活动都给你看。懂我的意思不啊,那我们优惠活动在哪个属性里面找一找啊。诶,这里面有一个什么supports看到吧,啊support里面不一个一个对象吗。这不有名字吗?
13:00
能不能看到啊,有名字啊,还有一个内容啊,看一下,那我这里面不要说这边是不是显示名字嘛,后面显示内容嘛,对不对。好看作一下,记住啊,叫suppose。那我这一个应该怎么写。来写一下啊,叫音符点。取第几个?下面为零的第一个对不对,接着它里面的什么。是不是有个name啊,Name好,这右边的这一个,右边右边右边下面。是什么来着,应该内容吧。能看到不好,但是呢,有一个情况,大家看这里面这个里面啊,实际上我不同的活动啊,不同的优惠活动,它的颜色不太一样。
14:02
能看到吧。不同的优惠活动是不是有这里面三个,有绿色的,有红色的,有一个粉红色,是不是有一个暗红色的,能不能看到。那一共有三个颜色,这三个颜色靠什么呢?你去搞,你靠什么样式嘛内嘛。能懂我意思吧,那肯定要指定不同类名嘛,那不同类名看什么呢?来看到这里面,这里面有一个。绿色,实际上大家想这个类里面肯定已经定好了三种。看到了吧,123看到了吗。能不能看到来,那也就是说我们这三个到底选哪一个,我看哪个值呢。是不是总得看一个值啊,对不对啊,大家觉得应该看哪个值,我们来看一下。看哪个字。是不是就看那个type值啊,能懂吧,这个能懂,那我这个该怎么设计的,关键是也就说这个值跟跟这个类名之间怎么关联起来呢。
15:11
大家看这三个type值,看一下这三个type值,012。像什么?上。啊,是不是向数组下标啊。对吧。那不能,那我就可以把这三个类名搞了一个数组里面存起来。我知道了太我是不是就知道了数值哪个元素啊。什么意思,大家看它,大家看一下我们当前呢,有好词,我们当前啊第一个对的句。对吧,在这里面来去写一个叫什么呢?比如说叫support。Support classes。
16:00
是不是就是活动的意思啊,它的值应该什么数组,而数组里面放的是不是就是那。几个类米呢?能懂吧,而且关键是这个类名的先后顺序有没有要求,有一定的要求。这个能不懂啊,是有一定是有一定的要求的啊,放在这里。应该还有一个。好像是叫什么orange。懂不懂,那也就是说下面啊,下面我要去啊,在这里。放到我们对应的位置啊。这里面应该是个动态的什么class,而这个值是不是这个数组里面取。是不是概念从数组里面的哪个值取了。
17:01
接着了。这能懂吧,啊要能懂,那也就是说现在啊,我们这一篇,哎,这个这个再写一下就差不多了。这个比较简单,就是这个support的什么,是不是长度。真的好,我们来看一下我们当前的这个啊。是不是报错了呀?好,报错了,报错了是一个什么错误了,这个错误经常见啊。前面是固定的,这句话呢,变化的地方在哪?一般就在这个名字变,经常是什么,Can'read property,某某某,Of或者of。这是一个比较常见的错误。
18:02
好,需要理解这是个什么问题。也就是说我去读那个零属性对吧,但是它的它的左边呢,说白了就是安迪范的点零或者中号零对不对,就是在一个安范里面是不是取零属性啊,我有吗。有,这不就是这个。这下面都是这几个都是有看到吧,有没有看到。那是一个什么样的问题呢?为什么会这样呢?说白了,现在谁的值是anyone suppose suppose是anyone说明什么?说明这个for对象里面没有any发,没有这个support。对吧,有人说老师音符里面有啊。我有啊,我咋没有了,我就是有啊,我银矿里面有。什么?
19:02
他这个他要出有问题跟这个没关系,他他有问题的话,他早就他提示问了啊,我哪个下面。这个商品。哪个团队啊,你说这里是对的。这咋就对了呢?他不是已经说这里面有问题了吗?这已经有问题了吗?当然这个也有问题,对不对啊,这个其实也有问题,因为是一样的问题嘛。对吧,他他是一样的嘛。就现在这个问题是一个什么样的情况呢,对不对。啊,刚分析了一通,说他是anybody的,他删了,说明这个O里面没有support,那关键我就问了,我O里面有support。咋就没了?是我写错了吗?没有,我没写错。大家在想这个这个数据是异步显示,什么叫异步显示?我告诉你,异步显示先显示初始数据,再显示带数据的数据。
20:08
对吧,先显示初始数据的初值是多少。Infod初值是多少,不知道。Info初值是啊。是宿主吗?什么类型的,那你说初值会指因为什么空的一下嘛,这还用想。我们开始根本就没数据吧,数据在后台嘛。对不对,我们在VX里面,在state里面不指定了,都是指的初始值吗?E不显示数据,就是先显示初始数据。对吧,过了一会才去显示最终的数据,你没发现最终也显示对了吗。对不对,但确实报错了。明白不?那报错是因为我在显示初始数据的时候出错了,对不对,那现在就要去避免这个问题,对不对,那。
21:08
大家想想看,我们刚才啊,就是因为我们的初始数据是一个对象。对吧,才导致的问题,那怎么解决呢。对不?那你就在想,在初始数据在初始显示的时候,我能显示什么效果吗?也就即使你能不报错。你能显示东西出来吗?能不能?你说不报错,就假设他不报错,你能显示什么东西了吗?开始。他哪能显示什么东西啊,一个空的。我整个里面什么数据都没有,你即使报错你也显示不来什么效果嘛,对不对,所以应该避免什么呢?避免在我没有数据的时候你去解析对吧。他现在我们现在的做法是不是他在初始的时候是不是解析了一遍,一解析必然报错吧,那我怎么避免他在没有数据的时候也去解析了。
22:11
是吧?嗯,那我得限制一下,他有数据我才解析。你说我要用什么技术?用监视,那监视不能管,用监视也不能说不让他解析啊。嗯。啊,其实用V。但我有数据我才显示嘛,我有我没数据的时候,我根本不存在,你解析解析啥。记住啊,这里面必须用VE。啊,必须用VE啊,我是一个怎么回事啊,我是这样的,看到我。在呢?
23:00
能看到吧,也就是说只有当这个有值,有值是不是说明已有数据了。有数据,我的这个div是不是才存在。没数据的时候。这个第都不存在。你要知道我们V隐藏是怎么隐藏的。是不是干掉它,但微秀行吗?不行,微秀是什么解析了,但只是什么不显示,我能解析吗?开始的时候不能解析,哎,这是大家啊,碰到平常有可能问你啊,碰到个什么问题怎么解决啊,其实这就是一个解决的办法,一个问题。对吧。啊,记住啊,我们用V来控制一下,在啊还没有真正的数据到来之前啊,有的是不能显示的,有人可能就说了,老师我这个怎么没问题呢。是不是前面怎么没报错呀?开始没数据,正好围起了,这是不是要有结构呀?
24:01
前面说明前面没报错吧,这个为什么没报错呢?为什么我这个就报错呢?你要总结出规律来,你不仅要能解决这个问题,还能从中找到规律,最终能够以后碰到这个问题瞬间就能解决。是为什么我这里会报错,而他这里不报错,你告诉我。或者说你来总结出来,你说怎么写就会报错。你说老师你去你就报错行吗?不是啊。啊。第二层数据什么叫第二层?我们前面说过一个概念啊,我们的表达式有一层一级一层表达式二层三层,还记得不能懂吗?我们在说那个模板解析的时候,不是说过这概念吗。对吧,是一层表达式就是一个A,两层表达式a.B3层表达式a.b.c。对吧。
25:01
那你说什么时候就有问题啊。都过了。什么时候就会问你啊,你的表达式是个三层表达式。两餐没问题。因为我初始值是个空对象或者空数组,你取一层,你你多取一层没关系,你比如说我写个A,本来是个对象或者数组,你写个a.BB不存在有问题吗?没有问题。对吧,这也是为什么我前面这个in four and BG image这个没问题对吧,我两级就是没问题对吧,但是你要取三级就有问题了。看没懂,因为现在二级的结果已经是案发了,你再取B报错嘛。是不是概念?啊,所以总结起来很简单了,就是当你写三级表达式的时候,那你脑子里面就要紧张一下诶。这个是不是有可能有问题,对不对。
26:01
真的吧,啊,其实这老师这是三级吗。是还是不是,是啊,这不相当于点零吗?嗯,简单来说就是三级表达式啊,或者叫三层的表达式。就可能也会有问题,因为我的初始显示的时候,因为初始值是没有数据的。所以我们解决办法其实很简单。就是在前面用一个什么V来判断一下我的数据是不是真的来了是吧。来看看行不行?这么嗨。不报错了吧?就这么简单啊。好,那这个基本的数据呢,就写上了下面啊,是我去有一些点击操作来显示它的详情,大家看一下。这边两个要显示一个这个。
27:02
对吧,还有一个是下面这个。知道不好来啊,我们先来去加一下点击监听啊,这个都并不难啊。啊,先把它显示隐藏先搞上啊,我们这里面显示有两个。这一个呢,是优惠活动以及商家的一些评分呢,什么相关的一些信息啊,这个地方不能用display,这这写死了。应该用什么微数或者V对不对,听到不好就微数吧,来微数,我这里面写什么呢?我这边是不是应该有一个。标识属性呢,嗯,假设我就写一个说划书吧,啊是商家相关的信息啊。嗯,这下面的这一个来把先把它收一下采购了,下面这个也是类似的,这个里面呢,是我的一些优惠活动。啊,也来个微数,那我这里面又活动到一个特别的单词叫什么呢?Support。
28:04
能不能数可以吧,那这两个呢,需要定义到哪个里面去。是不是date里面呢?啊,这个比较简单,初值都为什么for都不显示啊,对吗?啊再来一个叫support数,大家写的最好复制一下,因为里面有可能写错好,而且我是不是有一个点击切换显示隐藏啊,那我应该会有两个对应的什么。方法对不对,这个应该是可以接受的啊,来因为切换,所以呢,我直接来一个talk。Shop。Ho。Shop。这个能不能看到,记住了,我是切换,那我的值指定为多少呢?是不是取反了。
29:02
能不看到下面这一个也是跟这个类似的啊,叫talk,呃,Support能不有好现在也一样啊,做法都一样的,没什么难度啊,This点它等于啊非类似减它对吧?好,下面呢,这两个方法是不是要分别去用上。能懂吧,好,用上它上面的这个是商家相关信信息的来看,在这里找到一个位置,找一个合适的位置去做啊,找一个合适的位置去做,那比如说我在。嗯,我就在这吧,好吧,就在当前的当前的这里。整个整个看一下你就知道啊,来调给他呗,好,下面我还有一个。还有一个是当前的。
30:01
这个。那我就在整个这里写一个艾和等于好这一个不叫这个名字。显示啊,这个to support什么秀啊,这里面可以看到东西还挺多。啊,都是些小东西。可以吧,好,我们现在来看一下啊,看一下我们当前的。来啊,点一下它。各位可以来,我们需要去再次吧,是不是X也绑定一个监听,嗯。叉也绑定一个监听,用的也是这一个来叉绑定一个监听,感觉叉啊,哪个是叉了看一下。这个吧。另么呢,我们就给它大一点,大肯定用的同一个方法吧。这个这么懂,那当然我们下面是不是也应该有一个,他也应该有个差的。
31:05
第四的搞法嘛,都一样的,艾和等于只是这个名字吧,叫的是support。嗯,看一下能关吗?来下面这一个走你。可以吧,可以啊,没有问题啊,是可以的。还缺什么?就这里面的信息,我是不是写死了,还没动态显示了。这个其实说实话没啥难度。就是去找到对应的属性给他什么。是不是给他写上啊。这的吧,嗯,这个我不太想搞了,还有包括这个。这个里面是不是也是一样的。但是有一个事情我可以跟大家做一做什么事情呢?啊现在呢。我们是不是需要有一些动画会比较好一点?
32:02
看到吧,最好是有一个过渡动画就慢慢消失,慢慢显示。我们那个那个就是迷雾里面不有相应的传真型吗?对不强制性动画可以搞的来看这里。这个很好做啊,比如说这个加一个什么transition,写一个name等于。就写个废的吧,好吧,因为逐渐消失嘛。是不是放在这里面。好,接着找到这个列名。能不能找到这个类名?找到这个类容后,在这个下面还记得写什么吗?啊,忘了是吧,刚刚还记得那个名字吗?叫什么费杠杠。I。哎,这个地方应该有一个雨雨点对吧,懂不懂啊,这个雨点什么意思啊,这点肯定是用来形成内名的。
33:10
为什么是鱼啊?大家知道我们这个类名跟他是同级的。能不能,我要不加这个雨,那就是下一句了。不能懂吗?我这一个动画相关内容不加在一个显示隐藏div上面了吗?嗯,还一个肺的干什么?Leave,杠,嗯杠,Active啊,这个如果不记得了也没关系啊,你要回去能够找到也行,这里面写什么定义全锥形一样式对吧,变化的是什么?Over city。认吧,我city,好,这里就是下边。持续时间吧,你得有个时间呢,比如点五,我搞个长点的啊表可以吧,好下面还要写几个那名跟这个类似。
34:08
嗯,把它这个啊,格式一定要按table键啊,不要按空格啊,再改一改。这里面指定是隐藏式的样式。什么呢?这两个好,这个东西写什么呢,隐藏时。这个我们C为零呢,透明度为零是不显示呗,要不看到。都忘光了是吧,来吧。来看一下,我们当前也就是我点击这一个。能看得过去吗?有没有啊,有的吧,啊有的啊没有问题,那另外一个这个是不是也加上了。
35:01
可以,加法可以,但你搞法是一样的,对不对。能懂吧,啊好,那。这是这一个,还有一个就是大家刚才说的这里面的数据,这里面的这个数据啊,是动态显示的,对吧?动应该要动态显示,但我们现在有动态显示吗。并没有吧,并没有,那怎么办啊?嗯,这个我就不打算再去写了,就是这写起来没什么意思,主要是。嗯,我还是希望大家给点时间,有一部分呢,大家自己写一写就是,嗯,这个里面有几个秀的。就这两个。就这两个。
36:03
啊,这个名字不对。其他的应该都是对的,Support classes啊,都对的啊,都没什么太大问题,我们来看一下我们当前的一个数据。先看一下啊,好像。还有错误是吧,呃,错误,我们来看一下这个地方,哎哟,我天这一改还透,估计是这个名字,这里名字有有名字有问题对吧?啊名字有问题,我就是说我们这个地方应该是talk。Support show,我是这样写的吧。嗯,当前的。这个是吧。我是叫这个名字吗?看一下。是对吧,没问题啊。
37:04
是不是可以打开以后,主要是看后面这些数据都就是动态去显示的,包括这个里面的这个。啊,这里面我们一共不是啊几个来着,八个嘛,对吧?啊就是这么八个啊。啊。嗯,这样的话呢,我们就把这个这个基本的数据呢,给大家去显示了一下。嗯,这个主要其实交互性不算特别多啊,算是别就是把数据显示出来。不过大家做的时候还是一点一点给它做一下啊,把数据一点给他搞出来,因为你们一遍都没做过,所以说大家还是认真一点,稍微的一点一点把那个表的事,把这模板写出来,嗯,我主要是有点时间给大家尽量写一写,这没什么难度了。
38:01
好。那基本上我们今天要讲的东西呢,基本就到这里,那下节课的时间也是大家自己去写,包括晚上的时间,大家至少要写到这里啊,如果你写的话,便宜点也行,这都没关系。
我来说两句