微信小程序之界面交互反馈
交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯。
在小程序中是通过一下几种方式实现的:
1.wx.showToast()方法
showToast: function (postscollected, postcollected) {
wx.setStorageSync("posts_collected", postscollected);
//跟新数据绑定变量,从而且还图片
this.setData({
collected: postcollected
})
//这里调用了wx.showToast()方法
wx.showToast({
title: postcollected?"收藏成功":"取消收藏",
duration:2000,
icon:"success",
})
},
实现效果如图:

再次点击收藏按钮:

2.wx.showModal()方法
showModal: function (postscollected,postcollected){
var that = this
//这里调用了wx.showModal()方法
wx.showModal({
title: '收藏',
content:postcollected?'是否收藏该篇内容?':'取消收藏该文章?',
showCancel: "true",
cancelText: "取消",
confirmText: "确定",
success:function(res){
if(res.confirm){
wx.setStorageSync("posts_collected", postscollected);
//跟新数据绑定变量
that.setData({
collected: postcollected
})
}
}
})
不同状态之下点击收藏按钮出现如下效果:

收藏以后点击按钮:

原网址:https://blog.csdn.net/qq_40876689/article/details/80034886
微信小程序之界面交互反馈的更多相关文章
- 微信小程序:JS 交互逻辑
微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- 微信小程序与webview交互实现支付
实现原理:点击h5网页的支付按钮——(跳转)——>嵌套改h5的小程序的支付页面——(处理支付)——>跳转至支付完成后的页面 注意:(1)网页h5中,引入微信的jssdk <scrip ...
- 微信小程序与Html交互
微信小程序与H5页面交互 https://www.jianshu.com/p/22e951d83841
- 微信小程序--ajax服务器交互及页面渲染
网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...
- 微信小程序基础之交互操作控件
好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单.AlertAction提示框.SuccessAction完成框.LoadingAction加载 ...
- 微信小程序-前后端交互
前台手机验证码登录 <view>手机号:</view> <input value="{{phone}}" bindinput="bindPh ...
- 微信小程序的界面下拉刷新
小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true
- 微信小程序--分享界面自定义图片
一般小程序页面都会大于等于1页,每个页面右上角都会有分享功能,建议把以下方法封装到app.js文件,在页面直接调用该方法,避免重复代码,提高性能.(代码用到ES6语法,若不支持,请自行还原js) // ...
随机推荐
- go中处理各种请求方式以及处理接口请求参数
话不多说直接上代码,解读内容全部在代码中 1.处理请求方式 package main import ( "fmt" "io/ioutil" "net/ ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- element中的树形组件,如何获取父级菜单的id
一般多选的树形组件,使用getCheckedNodes()方法只能获取到本级的菜单id,只有在子菜单全部选中的情况下才会选中上级.但我们想要不全选中子级的情况下也要获取它的上级,甚至上上级等,怎么办呢 ...
- yarn报错error An unexpected error occurred:****ETIMEDOUT
起因 在一个美好的下午,我敲击键盘输入quasar create Tangerine_Reception 我自豪的使用yarn作为包管理器,本以为万事无忧,不用担心出现npm的种种异常了...... ...
- H5解决安卓软键盘弹出遮蔽的方法
首先先判断是否为安卓,是的话才添加事件监听,获取焦点元素判断是否为input或者textarea类型,是的话,Element.scrollIntoView() 方法会让当前的元素滚动到浏览器窗口的可视 ...
- Vue.js组件嵌套和template外用
Vue.extend组件的嵌套和template外用 组件嵌套分为全局组件嵌套和局部组件嵌套 组件嵌套需要将子元素写在父元素内 子组件必须在父组件中注册之后才能在父组件的模板中使用 全局组件嵌套 Vu ...
- vscode 的tab空格设置设置为4的方法
1.点击“文件>首选项>设置” 进入设置页面,设置如下几个选项 2.在“文件>首选项>设置” 的“用户设置”里添加 "editor.detectIndentation ...
- 简单认识并使用JavaScript【供后端人员作为了解】
JS(JavaScript)Web的脚本语言 脚本语言:无法独立执行,必须嵌入到其他语言当中结合使用 作用:控制页面特效展示 注:JavaScript没有访问系统的权限,并且JavaScript和Ja ...
- JVM 参数及各部分含义(转)
转自:https://www.jianshu.com/p/1c6b5c2e95f9 JVM参数分类 JVM参数分为标准参数和非标准参数: 标准参数: "-"开头的参数,如-clie ...
- Journal of Proteome Research | Quantifying Protein-Specific N-Glycome Profiles by Focused Protein and Immunoprecipitation Glycomics (分享人:潘火珍)
文献名:Quantifying Protein-Specific N-Glycome Profiles by Focused Protein and Immunoprecipitation Glyco ...