交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯。

在小程序中是通过一下几种方式实现的:

1.wx.showToast()方法

  1. showToast: function (postscollected, postcollected) {
  2. wx.setStorageSync("posts_collected", postscollected);
  3. //跟新数据绑定变量,从而且还图片
  4. this.setData({
  5. collected: postcollected
  6. })
  7. //这里调用了wx.showToast()方法
  8. wx.showToast({
  9. title: postcollected?"收藏成功":"取消收藏",
  10. duration:2000,
  11. icon:"success",
  12. })
  13. },

实现效果如图:

再次点击收藏按钮:

2.wx.showModal()方法

  1. showModal: function (postscollected,postcollected){
  2. var that = this
  3. //这里调用了wx.showModal()方法
  4. wx.showModal({
  5. title: '收藏',
  6. content:postcollected?'是否收藏该篇内容?':'取消收藏该文章?',
  7. showCancel: "true",
  8. cancelText: "取消",
  9. confirmText: "确定",
  10. success:function(res){
  11. if(res.confirm){
  12. wx.setStorageSync("posts_collected", postscollected);
  13. //跟新数据绑定变量
  14. that.setData({
  15. collected: postcollected
  16. })
  17. }
  18. }
  19. })

不同状态之下点击收藏按钮出现如下效果:

收藏以后点击按钮:

原网址:https://blog.csdn.net/qq_40876689/article/details/80034886

微信小程序之界面交互反馈的更多相关文章

  1. 微信小程序:JS 交互逻辑

    微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...

  2. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  3. 微信小程序与webview交互实现支付

    实现原理:点击h5网页的支付按钮——(跳转)——>嵌套改h5的小程序的支付页面——(处理支付)——>跳转至支付完成后的页面 注意:(1)网页h5中,引入微信的jssdk <scrip ...

  4. 微信小程序与Html交互

    微信小程序与H5页面交互 https://www.jianshu.com/p/22e951d83841

  5. 微信小程序--ajax服务器交互及页面渲染

    网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...

  6. 微信小程序基础之交互操作控件

    好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单.AlertAction提示框.SuccessAction完成框.LoadingAction加载 ...

  7. 微信小程序-前后端交互

    前台手机验证码登录 <view>手机号:</view> <input value="{{phone}}" bindinput="bindPh ...

  8. 微信小程序的界面下拉刷新

    小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  

  9. 微信小程序--分享界面自定义图片

    一般小程序页面都会大于等于1页,每个页面右上角都会有分享功能,建议把以下方法封装到app.js文件,在页面直接调用该方法,避免重复代码,提高性能.(代码用到ES6语法,若不支持,请自行还原js) // ...

随机推荐

  1. HTTP中主要的头字段

    HTTP中主要的头字段 头字段类型 含义 备注 通用头:适用于请求和响应消息的头字段 Date 表示请求和响应生成的日期   Pragma 表示数据是否允许缓存的通信选项   Cache-Contro ...

  2. Flask 请求中间件、错误处理、标签、过滤器、CBV

    目录 一.请求中间件 二.请求中间件额外方法(重写源码) 三.请求错误处理 四.请求标签.过滤器 五.CBV写法 基础版 常用版 一.请求中间件 中间件: 1 before_first_request ...

  3. 建议13:禁用Function构造函数

    定义函数的方法包括3种:function语句,Function构造函数和函数直接量.不管用哪种方法定义函数,它们都是Function对象的实例,并将继承Function对象所有默认或自定义的方法和属性 ...

  4. 爬虫 | cnblog文章收藏排行榜(“热门文摘”)

    目录 需要用的module 单页测试 批量抓取 数据保存 背景说明 因为加入cnblog不久,发现上面有很多优秀的文章. 无意中发现cnblog有整理文章的收藏排行榜,也就是热门文摘. 不过有点坑的是 ...

  5. github的上面的安全工具

    简介 Scanners Box也被称为 scanbox,是一个强大完备的黑客工具箱,它收集了Github上数10种类别的开源扫描器,包括子域名,数据库,中间件和其他模块化设计的扫描器等,但对于一些被大 ...

  6. 《Explaining and harnessing adversarial examples》 论文学习报告

    <Explaining and harnessing adversarial examples> 论文学习报告 组员:裴建新   赖妍菱    周子玉 2020-03-27 1 背景 Sz ...

  7. Trie树-XOR-1695. Kanade的三重奏

    2020-03-18 21:58:18 问题描述: 给你一个数组A [1..n],你需要计算多少三元组(i,j,k)满足(i <j <k)和((A [i] xor A [j])<(A ...

  8. 收藏 | 15 个你非了解不可的 Linux 特殊字符,妈妈再也不用担心我看不懂这些符号了!

    不知道大家接触 Linux 系统有多久了,可曾了解过 Linux 中有哪些特殊的字符呢?其实啊,那些特殊字符都大有用处呢,今天的文章就给大家简单地科普一下 Linux 中你需要了解的 15 个特殊字符 ...

  9. C#获取设备话筒主峰值(实时音频输出分贝量)

    1.引用类库NAudio,Git地址 https://github.com/naudio/NAudio 2.添加如下代码和引用: public float GetVoicePeakValue() { ...

  10. MySQL到底能有多少个字段

    今天技术讨论群里 “一切随遇而安”同学看书时出现一个疑问,一个MySQL的表中到底可以有多少个字段?带着这个疑问,我们展开了探讨,也接着讨论了一个单字段长度的问题. 1.  官方文档说明 官方文档的内 ...