00:00
好的,我们继续啊,那上一节课呢,我们做的是添加这个搜索历史记录,对吧,那这节课呢,我们做这个东西啊,那这个按钮我们现在呢,点击它呢,要实现这个清空历史记录啊,好的,那现在呢,找到对应的那个删除的按钮,是不是在这儿呢?我们去呢,给它绑定一个点击事件,这呢就是这个delete啊,这个哎,Search啊,语义化强一点吧,就是history,好的,那么对应的啊,我们来到GS里边。定一下啊,这个呢是呃,删除这个搜索啊,历史记录,嗯,来对应的回调我们写好了,那么点击删除的话,我们要干什么事情呢。对吧,啊,我们要干什么事情,这个是我们要考虑的,其实要干的事情呢,比较简单,我们只需要将这个。
01:00
本地的搜索历史记录。我们是不是可以给它移除掉,我们同时还需要将我们当前页面的这个历史记录的数组,要干嘛给它清空,是不是就拉倒了?对吧,所以啊来首先啊清空啊我们贝塔中这个,哎叫什么叫history对吧?List同时呢,我们要移除啊本地的历史记录缓存,这是我们要做的事情,来这清空特别简单,认识点S贝塔对吧,我们找到我们之前初始化的这一个。叫什么来过来,我们把这个收起来啊。Hit list对吧,直接呢给它置为空数组,那这样的话页面显示是不是就没有内容了,但是啊,你别忘了,你得把本地的移除掉,微信点,那这呢就是remove storage来来个同步呗,Think,我们要移除的。
02:06
叫什么呀,我们看本地当初存进去的字段呢,叫search cat对吧,来好是它。来,我们看一眼行不行?来过了。嗯,OK啊,现在有很多历史记录,我一点走,大家看没有了。嗯,本地没有了,页面上是不是也没有了。OK啊,那这是这个。关键是这一点直接就移除了啊,不太友好,我们最好是询问一下用户,如果同意什么,再去做这些事情啊。OK,那么如何去向我写好的这个我一点击。哎,我去。点击确定的时候再清空取消我就不清空。对吧?啊,那这个时候大家能看到这是我之前写好的项目,这儿呢,就没有考虑那个点啊,刚才上节课呢,我们讲这个,说如果同一条历史记录的话,对吧,我们啊就不添加新的啊,那那也算是灵机一动啊,我突然发现这个问题啊,就是考虑到这个点了,我们就把它做了。
03:18
啊,因为这些东西呢,都是我自己设计的啊,自己设计的啊,相当于自己就是产品经理,所以我们看到问题啊,我们就立马提需求,然后给他解决好的,那现在呢,我们要弹出这个询问框,那如何弹出呢?我们需要来到我们小程序的官网。嗯,走来,我去登录一下啊,登录一下。过来来到文档,哎,在API这一块。嗯,界面里边来我们找一下,它有一个叫收model。啊,首先我们来看它是显示这个模拟对话框,就模态框嘛。这里呢,其实没有任何必填的属性,对不对,但是呢,我们需要一个什么counter,就是说提示内容,我们得跟用户去交流啊,问问他呀。
04:07
嗯,那剩下的东西呢,我们就需要在success里面去玩了,来看着怎么用。上来我去弹出这个模态框,哎,是它,那么在这个里面呢,我们整一个对象啊,首先呢,来一个count,就问一下啊,啊确认对吧?啊删除历史啊,这个搜索记录吗?啊或者确认删除吗?啊别这么啰嗦了,就写它那么对应的我们来一个success。对吧。嗯,哎,是它成功的回调,里边我们去看一个东西啊,这个里我们打印一下这个res来conso res大家看一眼。嗯,也就看他到时候给我们注入的食材长什么样。
05:00
把这些清空一下。点击它,你看我点个取消打一个对象,点个确认打一个对象,那么在取消和确认的对象里面呢,都有个字段叫confirm为two,是确认,为false,是取消,所以啊,我们可以判断一下这个res里面的confirm对不对。那没有问题啊,If如果是res的confirm为用户什么同意删除就确认删除,那我们再执行这个。对吧,否则的话我们什么也不干就好了。来,那这个时候呢,再过来啊。我们先输一条A叉掉,这是不是有了,没有问题,页面上显示有了,本地也有了,那接下来走,我点击取消没有反应,我点击确定。是不是就清空了呀?好的,那那这样的话呢,我们历史记录这个删除我们也做完了,在这你要注意啊,当没有历史记录的时候,这个东西还有必要显示吗。
06:08
没有必要显示对不对,所以在历史记录的结构这儿,我们去给它加一个条件判断微信。If,如果说我们这个历史记录的数组对吧,它的Les大于零,我们再显示啊,否则的话我们就不显示来,这个时候看着啊上来是没有的,我输个一。叉掉打卡是不是就有了,然后我这一确定删除啊,它就又没有了。哎,那这样的话呢,我们删除的功能就完整实现了,那除了删除呢,我们正好把这个也做了啊,这个叉号它不应该一直显示在这吧。不应该一直显示在这儿。对吧,什么时候显示在这儿呢?一定是这个表达上是不是有内容的呀。所以啊,我们找到这个叉号这。
07:05
来找到这个叉号,这我们去。控制一下它的显示和隐藏啊来,那在这儿呢,我们之前是不是用的一直是微信if或者else呀。对吧,那其实啊,微型if和else呢,跟我们view里面的V-if和else是一样的。嗯,那这个呢,如果为false的话,是不是压根不在我们结构里面加载呀。对吧,那在view里边呢,和它对应的是不是还有个V杠受,V杠受呢,是通过控制display为block,或者说是none来控制元素的显示和隐藏,这个元素一直在,对不对。哎,小程序里面呢,其实也有一个这个啊,它还有一个属性呢,叫hidden。后边跟一个布尔值ton是不是隐藏的意思?如果它为false,那说明啥?
08:02
要显示出来,如果它为触呢?大家看就没有了,对吧?啊表示是否隐藏,那这个hidden顿的作用呢,等同于我们V中的V杠受啊V杠受这为什么用这个呢?你想想看,我们用户这很有可能一书一删,一书一删,那这样的话相当于这儿是不是频繁呢。切换呀,因为它频繁的切换,所以呢,我们最好是用hidden去控制它啊,那这个时候呢,进来我们看一下这个标签啊,我们找到那个。嗯,头部来取消这里来,我们应该再表达一下,在这这不是clear clear吗?这个标签它是不是一直在。对的吧,啊,标签一直在啊。如果是需要反复切换显示隐藏,用它的效果要比用V-in的性能要高啊,效果一致啊,但是性能要高,来这儿呢,我们到底写什么条件,什么时候让它隐藏。
09:07
只有我表单项的内容就是search content里边啊,没有内容的时候。这是不是叫隐藏掉,如果有内容是不是显示出来,注意啊,这是一个SC的,最终是不是搜搜集的是字符串呀,所以啊,我们可以直接判断它,哎,你如果有值,那就为处呗。来,如果有值为触,哎,如果有值触,我们是不是应该把这个显示出来啊,所以这应该是什么取反,如果没有值就是为空串,那这就false false在于取反是不为处,把它隐藏掉,来我们看一下是不是这样的上来。上来没有,我是为出来为叉掉隐藏掉好的,哎,那这样的话呢,这个哎清空表达下这个动向呢,啊,这个叉号呢,我们也做完了啊来那到现在为止啊,我们搜索界面就全部做完了,那么这节课呢,我们先讲到这里。
我来说两句