美文网首页微信小程序
6-8 操作反馈wx.showModal

6-8 操作反馈wx.showModal

作者: 留白_汉服vs插画 | 来源:发表于2017-11-22 16:43 被阅读17059次

知识点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这个方法了。解决的方法:在

相关文章

  • 6-8 操作反馈wx.showModal

    知识点1、模态弹窗。你不主动关闭,它一直存在。 跟上一节一样,都是提示,不过这个需要点击,才能消失。上一节不需要用...

  • 6-8 操作反馈wx.showModal 图

  • 2019-01-19

    看视频 学习了三种界面交互反馈 感觉很神奇 分别是 wx.showToast wx.showModal 和wx.s...

  • 弹框相关API

    2019年12月26日 一.消息提示框 二.模态弹框 wx.showModal(object) 三.操作菜单 [...

  • 如何在程序性知识教学中提高练习的效果?

    1、及时提供反馈信息 反馈有外部反馈与内部反馈之分。前者是通过操作者自身以外的人或事提供的反馈;后者是指操作者自身...

  • 关于动效的笔记

    大象无形,润物无声 动效分类: 一、信息交互: 空间关系、内容呈现、聚焦关注 二、操作与反馈: 操作反馈、状态反馈...

  • 反馈

    “即时反馈”是产品可用性的基本要求之一,指用户的每一次操作立刻得到回应。 反馈有主动操作获得反馈(告知操作有效、操...

  • 微信小程序 wx.showModal去掉取消按钮以及自定样式

    wx.showModal({ title: '提示', content: '您确定要删除该文件...

  • 交互反馈的设计方法(附学习视频地址)

    反馈的用处:用以给用户正确的交互操作引导,帮助用户判断和决策。 交互反馈的模型: 上文--反馈--下文 反馈的类型...

  • 操作反馈设计小结

    什么是操作反馈 反馈设计在产品中的使用是非常广泛的,如鼠标的悬浮,点击和按下时界面元素视觉样式的改变是操作反馈,如...

网友评论

    本文标题:6-8 操作反馈wx.showModal

    本文链接:https://www.haomeiwen.com/subject/tzmipxtx.html