00:01
好的,我们继续啊,那上一节课呢,我们已经把这个搜索的内容啊动态的实现了,并且呢,我们也用函数截流,哎,是不是给它做了一个呃,性能优化好的,那这节课呢,我们去把这个获取到的动态的数据呢,我们给它展示出来啊啦啊,首先来到我们的结构这里边啊,在我写到这儿吧,写到热搜榜的前面啊,热搜榜的前面,那这个呢,对应的叫搜索的内容展示,展示区域啊在这个里面呢,它应该是有两部分内容啊,大家看我写好这个,一个是有一个标题,一个是是一个列表,对吧,那这里啊过来。呃,我们来一个view吧,啊,来一个view,这呢我们叫收啊search是吧,嗯,Count区域。好的,那在它的里面呢。呃,有个什么,有个首先我们先来一个text吧。啊,或者来一个view吧,啊,那这个呢,专门叫他一个search content,嗯,Search content啊,那这啊对应的有个文本啊,叫搜索内容啊搜索内容那后边这显示的就是当前表单项的这个内容,对吧?那这个呢,比较简单啊,比较简单我们当前表达上的搜索内容我们有吗?有叫叫什么呀,叫search content呗,哎,我们当初呢,收集的到data中了,对吧?嗯,可能有的小伙伴忘了来我们看一眼。
01:30
是它好的啊,那这是这个。对吧,那接下来还有啥呢,那下边呢是一个列表对不对,那这呢,我们来一个啊叫search,呃,List吧。哎,Search is好了,那在这个下边呢,我们去整一个叫search item,那里面的个体search item里边我们看一下它有啥呀?啊,左边一个搜索的图标,右边是搜索到的一个文本,那比较简单,左边的图标啊搜索的话呢,啊,我们之前是不是有这个A口。
02:06
直接给他拿过来啊,直接把这个拿过来。好的,哎,是它,那那对应呢,这应该给人家整一个什么class,那么下面这呢是一个文本啊,那这个文本呢,是要看我们拿到的数据里面长什么样啊,那么干脆啊,我们直接呢,就给它循环遍例出来了,来微信for过来,嗯,我们要B例的呢,是这个search list啊,微信K,我们找找它对应的数据。啊,有没有什么唯一,唯一者有ID呗,啊,这个不是我们之前模拟的吗?在这里对吧?这是最终的search list对吧?每一个对象呢,有自己的ID,所以呢,啊,我们可以把这个丢进来,而里边这儿的文本。找一找啊,那这应该是什么item点点什么呀,我们就给它显示这个name,那就是它好的,那这样的话呢,哎,我们这其实就写完了,写完了以后。
03:04
看一下效果啊,搜索内容默认没有,我说A有,哎,那这不就出来了吗?出来了以后我们去调一下它的样式。哎,调一下它的样式。好的,那这个样式怎么调呢?首先上边这个搜索内容content啊,我们去写写来,把这个呢移到右侧去。啊,那这个呢,是啊,搜索内容展示,嗯,哎,Search content啊,那么这个search content呢,啊,跟我那个写的一样的话呢,我这是随便啊加了一个什么啊加了一个。颜色,那么这个颜色的话呢,我们直接去这个里面呢,我去啊找一下它。使这个呗。在这啊,呃,对应的颜色用的是一个rgba的,我当从这呢是随便取了个颜色啊,嗯,是它好的,那还有什么呢,我们给它设计高度吧,比如说来一个80啊拉hand为80。
04:09
对吧,啊,那这样的话呢,就是上下啊有一点距离呗,啊上下有一点距离啊,同时呢,我们去设一下里边的字体大小,比如说来个24倍,嗯,没问题呢,然后呢,我们给它加一个什么bottom啊边框啊,来个ER PX solid,然后呢,来一个咱们官方的主题色吧这一版。嗯,官方的主题色,去我们全局里面找一下啊有。是这个呗。好了,那现在呢,我们把这个颜色,哎放到这儿。放到这儿,嗯,还有啥呀,嗯,先这样啊,我们看一下效果吧,过来。有吧,啊没有问题,我输A啊,它就A,那这样的话打卡这个底色跟这个字体颜色啊不大啊,我们这那这干脆这样吧,我们都用主题色吧。
05:02
啊,因为我们自己写啊,所以呢,可以稍微随意一点好的,那这不就有了吗,来走。那没有问题,那下面这儿呢,我们也给他设一下样式啊,那这个呢,也比较简单啊,找到下面的search HM,嗯,个体的那SHM这呢。我们可以给它来一个高度啊,比如说80对吧?啊行高的话呢,我们也来一个80。然后大家看一下,我写好这个啊,右侧这。右侧这儿。在这一块呢,是有一个下边框的,而且呢,就是针对于这个内容区,并且啊这个下边框在不同的进行上,它也是自适应的,所以啊我这样去做,看着我让这个个体。哎,就是search I上面的个体,我让它呢成为一个flex布局。它成为flex以后呢,那么右侧这儿的counter的内容区我们就好控制了。
06:03
啊好控制了,那这个内容区怎么写呢,来。嗯,它下边的content对吧,首先呢,我们可以来一个f flagx为一啊,这样的话呢,是把多余的这个宽度都给它呀,然后呢,离左边有点外边距来个Mar left为二小,同时呢,我们去给它设一个底色的边框solid erps,嗯,那我们来个啊,Erps solid啊,来一个井号一一啊,这个颜色得淡一点啊,同时呢,我们设一下字体颜色啊,字体大小二16。再看。说个A。有了吧,啊,没有问题,来说个B。嗯。嗯,没有发请求对不对,没有发起就是因为什么,因为这报了一个错,大家看啊,为什么会报这个错呢?400半的request是个坏的请求啊来,那这个时候呢,你可以看一下network啊,我们发当前的请求是不是要携带keywords呀,那这个请求没用啊,这是为什么呢?
07:13
是因为刚才我这一往回删的话,你注意啊,表单项的内容是不是从B变成了空串。对,不变成了空窗以后呢,它还是会发一次请求啊,但这一次的请求呢,我们拿不到任何的数据,所以会报这个错。那这个不是我们想要的。你想当表单上的内容为空的时候,有没有必要去发请求?没有必要对吧?所以来到我们的GS里边。我们发起球的这个功能函数在这儿。对吧,上来呢,我们可以去判断一下,如果说我们要拿的这个表单项的内容,对吧,假如说为空,我们再一取反为处,那我们这是不是干脆就return呢,就拉倒好的,那这个时候呢,我们再来看一下啊,输个一。
08:09
没有问题,我一回山注意看有没有发点球,它并没有我再输个B,哎是不又发了一次,哎没有问题,那这样的话呢,相当于是我们这个搜索的列表展示,咱们就做完了,那做完了以后呢,你会发现下边这很不舒服呀。乱糟的对吧?这是为什么呢?那是因为现在如果说我搜索出来内容,那下边的热搜榜就不应该显示出来,说白了,现在啊,我们把样式关掉,搜索内容展示和热搜榜它俩应该是互斥的关系。对吧。互斥的关系,那针对于这种情况呢,我们可以这样去做啊,看着我呢,给它加一个block。嗯,然后把我们的内容放进去。
09:00
嗯。对吧,加一个block来调整一下啊来,而下面这个呢,我们也可以干嘛呀,也可以给它加一个block。放进去。啊,Block呢,表示块的意思啊,它呢用于圈住多个元素,是一个整体,这里呢又给大家说了一个标签啊,使它。那么用这哥们有什么好处呢?它可以表示多个元素,是整体啊,现在我们下面其实它下面只有一粒子元素啊,还看不出来有什么好处,那待会儿你别忘了,我们还有什么呢?还有这个,你比如说我叉掉还有搜索历史呢,这样看搜索历史跟热搜榜是吧,一块去显示或者隐藏,而你这个搜索的列表是单独的一个区域,那这样的话用block可以圈住它啊,可以圈住它,而且呢,加了block还有个好处是最终的页面我们来看一下。大家看在这里边呢,并没有block的标签,那这哥们呢,是个活雷分啊,它可以帮你圈住多个元素啊,表示是一个整体,但是在我们的页面结构中并不加载它。
10:13
哎,那这样的话我可以干嘛呢?我可以通过调节判断来决定到底显示哪一个块。啊,也就是说我需要通过微信if步去写,那这个条件到底是啥呢?什么时候显示上边的内容,你想想看,是不是当我们搜索到内容以后,搜索到内容以后呢,意味着我们的search list这个数组是不是有值呀,所以这儿可以这样做,我们去判断一下它的Les,如果Les大于零显示上边,那否则的话,我就让它显示下边的内容。好的,那现在我们再来看一眼,哎,上来是这样的啊,我输个A走,你看啊,那个热搜榜是不是隐藏掉了,压根就没有了。啊,是这样的啊,然后我把这个一删,删掉以后大家想当我们表单项的内容为空的时候,这儿还要不要显示这个。
11:11
你不发请求了对吧,那我这也清空了,清空以后其实这就不应该再显示它了吧,所以刚才我们在做GS判断的时候。如果表单上的内容为空的时候呢,我们可以在这里呢,干嘛set data,我们去把之前的搜索记录给它,干嘛只为空,那这样的话呢,会好一点啊,过来。我输个A没有问题,我咔一删,哎,是不是又还原了好的,那这样的话啊,我们这个搜索的功能啊,我们就做完了,那这一节课呢,我们讲到这。
我来说两句