00:00
好,那我们继续啊,那上一节课呢,我们把这个搜索的功能啊做完了,那这节课呢,我们把这个历史记录啊,这个板块呢,我们也给大家写一下啊,那这个板块呢,是只有这用户真正搜索完,你发完请求的这个内容呢,就会显示到历史记录这然后呢,点击的话呢,我们也可以清空它啊。可以清空它来,那历史记录这个版块呢,跟热搜榜应该是共同显示或者隐藏的,对不对,所以呢,接下来啊,我们可以在哪呢?在热搜榜的上边,我们去写这个搜索历史记录对吧?好的,哎,这儿呢啊写一个它啊搜索的历史记录板块,那我们先来一个包裹器啊,就是history特瑞呗,在它的下边呢,首先啊,有一个什么固定的标题呢,就叫啊历史或者叫搜索历史啊都行,那么再往后是一个什么呀,其实是一个。呃,列表,我这呢就叫它一个history,呃,Item吧,那这个列表就是最终我们搜索过的所有数据展现。
01:09
对吧,那现在呢,因为没有啊,我这儿随便给大家写一点吧,啊,比如说啊什么呀。哎,你好,然后呢,我们复制几份吧,啊,我这儿呢,再来一个,来一个长的啊,比如说呢,我们再来一个啊叫海阔天空,那这样的话呢,假如说有多条历史记录,那我们复制几份呗,放到这儿,那待会儿呢,这些肯定是动态的啊,肯定是动态的。好的,那基本的结构我们搭完了以后呢,我们去写一下对应的样式啊,找到我们的样式文件。来把它呢,挪到我们的右侧啊。啊,接下来呢,我们要写的是这个搜索历史板块,好的,那首先啊,我们写一下这个history对吧,Hitter里边所有的子元素啊,不管说title啊,还是我们的那个。
02:05
呃,什么呀,还是我们的黑特H,那它呢,都是。牛市布局我们看一眼啊。是不是?流式布局啊,从这开始,那这个时候呢,我们也可以用什么用flex布局,那我上上来就display flex。啊,然后呢,因为有多行的话,是会自动换行的,所以呢,这应该是啊flex rap吧,对吧,然后呢,我们让人家换行,嗯,没有问题,这是我们能想到的,那么它下边的title呢,我们需要专门去设置一下history啊下边的这个title。嗯,来,我们来一个photo size啊,这字体稍微大一些,来个28,那么它的高度呢,我们设一个50呗,啊没有问题,那同时它的行高呢,我们给它来一个五十来加到这。嗯,加到这啊,那其实加到这儿不太好,加到这儿只浮于title了是吧,我们让下边所有的内容呢,诶不应该上这啊,让下边所有内容的这个高度呢,都应该是这样,那我们是不是应该放到它的副元素身上,那这个title呢,我们就设一个字体大小啊,就设一个字体大小,然后里边的history item呢,我们也去写一下啊,是它。
03:18
嗯,那这个黑I的话呢,我们设一下它的字体大小啊,Fo size,那相对于那个历史来说的话,我们稍微小一点,比如说来个26啊,26没有问题,呃,还有啥呢,这呢应该有一个背景颜色啊,我们这儿呢,来一个淡一点的吧,Dededede。嗯,那这样的话呢,我们看一下效果。好的,大家看啊,这么是吗?对吧,那现在啊,每一个个体跟每一个个体之间呢,是不是应该有一点。外边距。对吧,所以啊,我干脆呢,给这个黑H呢,我这呢设一个什么呀,Left统一的往右去走,走一点,我们来一个20个像素的外边距,嗯没有问题,然后呢,里面的话呢,也不能太窄了啊,那这个时候大家看啊。
04:08
我们看看效果。买面就是有了,但这个文本背景设置好丑啊,你看我写好这个啊,这个呢是尽可能跟官网的一致啊,就是左右是不是有一点留白啊,而且呢比较圆润一点对吧?好,那这个时候呢,我们可以怎么做呢?我们去用白拍定呢,去给它撑开,那上下为零,嗯,左右呢,我们来30个像素的内边距。来内边距,然后呢,我们来一个圆角,来个20个像素的圆角,我们看一眼。嗯,这不就好了吗?对吧,啊没有问题,那现在这哥们好了以后呢,他是什么呀,他把我的。热搜榜这个是吧,给我。压住了呀。啊,把热搜榜这压住了啊。
05:00
嗯,那亚洲的没关系啊,现在你看其实这个历史板块跟上面跟下面都挨的好近啊,所以呢,我们给这个历史板块上呢,我们去加一个marin,哎,比如上下为20个像素呢,左右为零。嗯,哎,好像没加对地方吧。啊,下边其实也对了也对了啊,加加是加上了啊没有问题,那我们的热搜榜的话,它怎么会让让它压住呢来。这不是我们的热搜榜吗?在这里。对吧,啊,热搜榜没有问题,热搜榜的包裹器在哪呢?嗯,就是这个hot container hot container呢,就是我们下边写的这个呗,嗯,哎,我们现在也没有什么定位啊,也没有什么定位,那这样的话,我们还得写一个东西啊,大家看现在。换行是换下来了,可是你看挨的太近了,上下我们可以干嘛呢?我们可以给这个每一个个体呢,加一个market包来20个像素,那这样的话呢,有一点距离啊。
06:06
嗯,会好看一点好的,那现在呢,他是把热搜榜这。给咱压住了。对的吧,压住了以后,那我们热搜把这压住呢,其实是因为我们这个应该是用flex布局,我们看一眼在history这我们用了个display flags。对了吧,下边呢,是我们的hot container,我们找一下hot container过来。我们并没有针对他呢,去设置过任何的样式啊,设置过任何的样式,那这样的话呢,为了避免不压住下面的,我们可以给它呢来一个market top,比如说来个30个像素。离他远一点,别让他把我那个字压住啊,哎,没有生肖是吧,没有生肖我们看一下为什么啊,过来。嗯,这不咱的hot container吗?Hot container现在看的话,我们上边。
07:06
并没有什么呀,并market应该是没有生效,那我确认一下啊,我加到哪了,我加到title了对不对?嗯,点一个hot container过来丢给他我们再看。嗯,再看。好的,现在大家看一下啊,我这儿呢,写了一个market top,但是呢,好像跟上边这个history。嗯,并没有什么外边距啊,并没有什么外边距,哎,其实有这个时候,你看为什么现在呢,亚洲的history现在的高度是多少,是25。25,那为什么呢?它应该是由内容撑开了呀,那说明当初呢,我给他设了一个高度啊,我们看一眼。是不是这个东西啊,这个高度呢,不应该加给他吧,加给他的话呢,不行啊啊所以啊,其实针对这个情况,这两个还真不能写给他,写给他的话不够分。
08:10
我们可以把这个高度设给谁呢?应该是设给title,含有这个item,那这样的话呢,每个个体的高度是不是50呀,我们再来看效果,大家看就挤到下边了,没有问题,哎,刚才呢,是因为我们写了一个高度啊,好的,那现在呢,历史记录这一块就有了。对就有了啊好了,那还有一个东西啊,就是删除历史记录的那个图标,对不对,那么在历史记录里边啊。嗯,我们先来在这个啊,嗯,这是那个个体对不对,没有问题,在这些个体的下边啊,我们可以把这些删掉,我们只留一个呗。在它的下面呢,我们再整一个啊,是这个删除。区域来删除的话呢,首先我们用到的是一个icon fo啊,那对应的呢,叫什么呀?叫嗯I扣啊,就叫删除这个也比较好记好的,那现在呢,我们首先看一下这个。
09:16
能不能进来在这儿呢,对吧,这个图标呢,在我写好的这个项目呢,我始终把它放到历史记录板块的右下角区域,所以现在我们也去这样去做一下啊,那这样的话呢,我再给他一个class吧,通过delete这个class呢,去控制一下那个删除的按钮啊。来在我们history下边有一个delete对吧,他呢去帮我们去做这个啊删除啊删除好的,那这个删除的话呢,相对于我们那个history啊,也就是说历史板块我们要干嘛呀,要定位定位在它的右下角,所以这直接absolute一下,那么对应的我们应该给历史记录的板块呢,我们来一个operation,来一个relative。
10:08
这是我们上来就要能想到的,那么在右下角的话呢,首先我们先来设一个bottle吗?比如说离底部呢,来十个像素12T X right的话呢,我们来个15瞧一瞧。哎,同时呢,我们去给他设一下字体大小吧,比如说大一点的话呢,我们来个36RTX来看一眼。嗯,是不是到右侧了,现在一个,呃,现在还看的不是特别明显啊,如果说这个历史记录特别多的话,大家会看的明显一点,来我多复制几份,我们再来看。嗯,你看是不是在右下角这儿。对吧,嗯,没有问题,好的,那这个呢,就是我们删除的这个按钮啊,当然了,你也可以给它加一个什么背景颜色等等啊,那现在呢,我们就不加了啊,光知道有这个东西就好了,那左侧这些呢,我们就撤销了啊,留一个,因为待会儿呢,我们肯定是要循环为例的。
11:09
好,那这样的话呢,啊,历史记录这个板块的静态搭建啊,我们就写完了,那这节课呢,我们先讲到这里。
我来说两句