00:00
大家好,那这节课呢,我们先来写一下商品的一个搜索啊,啊可以看到我们如果是直接复制的这个分类的话,它这个搜索是不能点击的啊,点击不了,那通过检查大门,我发现它就是一个VI有系的一些样式对不对,所以呢,这个呢,我们就暂时不要了,不要了,那我们使用哪个组件呢?使用这个色系组件啊,直接就复制这个就可以了。好,那我们把这块给替换掉,就是原来的这些内容不要替换掉。这个改一改啊说呃,输入商品名称啊来进行搜索啊,它有双向绑定一个开外keyboard,就是我们搜索的文字呢,会被这个变量给收进,先看看样式啊,可以看到样式没有什么问题,而且还能输入对吧,那么点击搜索就能搜索了,嗯。那接下来呢,我们需要去,呃,把这个keyword给定一下,这个是我们搜索的关键字。啊,这是搜索用的,搜索用的。好,那接下来的事情就是说我们点击这个搜索啊,点击这个搜索如何去触发一个事件啊,进行这个搜索。
01:10
啊,这个是我们的K重复了,就是循环这个分类的时候,这个K重复了。几杠几,几杠几啊,我们来找一找,是这里面。有一个。找一下我们循环在这里。这里没有给K。我把这个K等于。Index。大家刷新。啊,这就不报错了,对吧,实际上这个循环的时候,这个K呢,还可以用谁呢?还可以用这个c.ID就是我们分类里面它是有ID的啊,所以呢,这个我们就统一用ID吧,c.ID。那上面的这个K呢,我们也用这个。
02:00
转ID都用ID做OK,它就不会出现这种循环的这个。啊,K的这个问题啊,那接下来说我们的这个问题啊,比如说我们现在啊,这个KO的定了,那我们出完内容之后点击搜索,我要能触发一个搜索事件,那来找一找啊,下面应该有这个事件啊。点击右侧。控件触发。那我们应该是用这个这个给他绑定一个事件。色固好,我们来定一个这个东西啊。嗯,这个先放着先写。搜索商品它有一个参数啊,回调参数是V,就是我们输入框的这个值啊,我们来打印一下这个v log。
03:04
来刷新,好,那我来输入AAA也搜索AAA,嗯,实际上呢,我们不用这个V6也行,那我们是用了一个双向绑定,就说我们输入值会双向绑定到我们这个qo的上面,因为我们使用这个qod也是可以的S搜索,对吧?哎,实际上呃,这个参数呢,我们暂时用不着,因为我们在点击这个搜索商品的时候,哎,要重新去请求这个数据get data对吧,要重新调这个get data方法那。在调这个方法的时候呢,我们可以啊,给它去加一些额外的参数啊,来我们这里先把这个参数写一下cost a啊am,他等于你先把那个分页的参数给它放上去。这个是分页的,那这个呢,我们就传这个啊。那紧接着呢,我们还要传一个,呃,搜索的一个条件就是根据商品名,那我们来看API。他的这个根据商品名搜索上是这个开头啊,所以呢,我们这里开头给它加上,那它等于是SQ的就是我们搜索的这个文字对吧,那我们点这个,呃,搜索实际上就是重新调一下这个方法就可以了,调一下我们刚才这个方法就可以。
04:10
只不过呢,我们要把这个。啊。设置为要把这个分页也可以设置成一啊分页我看看下面这个,你定一下分页吧啊,不能用这个current current是给那个左侧的分类用的,配置等于一,好,那我们这个。分页就等于这点配啊,那我们在搜索的时候要把这个分页啊给制成一。嗯,然后重新搜索的时候会带上这个keyword,那我们来测试一下。现在呢,嗯,可以看到这有Linux有这个PP,那我们现在呃,只搜索这个PP。来点一下搜索看一下。啊,可以看到啊,PP的数据啊,是不是这数据变成全是PP的数据了,对吧。好,那这个就是我们的这个。啊,搜索就写完了啊啊,那这节课我们完成了啊,分类的一个搜索啊,当然还有一个细节是我们如果点这个叉的时候,删除内容的时候,那我们应该清空这个输入内容,并且重新去发起一次请求,对吧?那我们来找一下点击这个叉的一个事件叉,有一个是可啊。
05:21
清除内容时出发。啊,应该就是他,那我们把这里来写一下啊。可啊,那我们来写一个。可乐设计。啊。这个方法就是在我们点那个青川钮的时候会触发,其实它的作用是干什么呢?跟我们的这个一样啊,所以呢,我们再来再来复制一下啊。清空清除搜索商品啊,那这个是。Clear search好也是让配置等于一,然后让这个keyword也等于一啊,等于空啊,就是清空我们搜搜索的这个内容啊,同样的重新调一下这个,改个地址就可以了。
06:09
啊,我们来试一下啊,接着现在还是重新去搜索一下PP,那我们来点击搜索,可以看到内容变成了PP的这个内容,那如果我们点击的这个清空啊,可以看到,诶,又回到了原来默认的数据,好那呃,完完成这一步之后呢,我们的搜索就真正的写完了,好,那这小节我们先到这里。
我来说两句