知识点1、模态弹窗。你不主动关闭,它一直存在。
跟上一节一样,都是提示,不过这个需要点击,才能消失。上一节不需要用户确认,这一节需要确认。
相关api如下:
代码示例:
需要什么功能,自己去找,不要全部去看。
同样,先考虑在哪里添加showModal。同样也是在点击“收藏”图标,触发的事件,所以showModal()的执行应该在收藏图标事件中。然后考虑逻辑问题,假设现在是灰色图标,代表没有收藏,点击图标后,如果点击“取消收藏”,那么图标会变成蓝色,也就是收藏状态,显然这是不对的。所以我们要根据data中的postCollected状态,在点击事件之外来自定义一个符合正确逻辑的showModal或者showToast函数。
看一下showToast的正确逻辑和showModal正确逻辑
showToast,是点击图片后,先设置新的缓存值和data中的值,然后提示收藏成功或者取消成功。
showModal必须确定用户点击是收藏还会不收藏。这个这个值就在success函数res里面。res.confirm为true,表示是点击的是确认。
现在在点击事件里面调用这个自定义的showModal函数。this.showModal()。注意这个tihs,指的是(点击事件的)函数调用的上下文环境(点击事件跟showModal是平级的,所以点击事件的上下文执行环境中能找到showModal)。没有这个this,会报错“showModal is not defined”。因为showModal函数的定义并不在点击事件中,所以不能直接调用showModal()。
另一个报错:postsCollected is not defined。因为在函数showModal定义的过程中,确实没有定义它。所以需要定义showModal()时候传进来postsCollected和postCollected。同理在定义showToast时候也要传进来。那么在点击事件中执行showModal时候,也要传进去对应参数。
第三个报错: this.setData is not a function
这里的this指代的就不是Page 下面这个环境了。所以下面就没有setData这个方法了。解决的方法:在
网友评论