微信小程序之界面交互反馈
交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯。
在小程序中是通过一下几种方式实现的:
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) // ...
随机推荐
- Polly每次重试执行不同的操作
Polly每次重试执行不同的操作 前言 最近在写WG(用的 .net core 3.1 + wpf + abp vnext),程序里大量用到了重试机制选用的是Polly组件(只知道这个...). ...
- textareaCenter 未完结 其实就是iview的textarea的从写一遍 需求是光标上下居中
重点1: 一但赋值内容,光标会失去,导致光标到第一位 解决方法 设置一个状态位isChange,编辑的时候不进行watch更新,因为emit会自动改变外层的值,触发watch 解决方法2 找回上一次的 ...
- atomic的底层实现
atomic操作 在编程过程中我们经常会使用到原子操作,这种操作即不想互斥锁那样耗时,又可以保证对变量操作的原子性,常见的原子操作有fetch_add.load.increment等. 而对于atom ...
- rabbitmq系列(四)死信队列
一.什么是死信队列 当消息在一个队列中变成一个死信之后,它将被重新publish到另一个交换机上,这个交换机我们就叫做死信交换机,私信交换机将死信投递到一个队列上就是死信队列.具体原理如下图: 消息变 ...
- 74. pNextID、pNextVal、pNID的区别
pNextID是平台调用单个新增组件的时候调用的: pNextVal是平台批量新增的时候调用: pNID应该是自己写的 :
- SpringBoot源码分析(一)@SpringBootApplication解析
@SpringBootApplication解析 三层注解 @SpringBootConfiguration @EnableAutoConfiguration @ComponentScan(exclu ...
- iOS 指纹认证登陆开发(TouchID)
设计思路 TouchID 关联账号 用户登陆成功 -> 开启TouchID登陆 -> TouchID验证 -> 记录用户信息(验证通过) -> 关联完成 TouchID 登陆 ...
- Java高效编程:总结分享
参考资料:慕课网:Java高效编程收费实战课程.博客园.CSDN.菜鸟教程以及其他文档. 篇幅受限,不太想针对每个点都写篇博客,有的地方可能写的不是很详细,一笔带过了.如果你觉得那个点在项目中用得上可 ...
- SpringBoot系列之缓存使用教程
介绍SpringBoot项目中使用缓存,之前先介绍一下Spring的缓存抽象和JSR107,本博客是我在学习尚硅谷视频和参考其它博客之后做的笔记,仅供学习参考 @ 目录 一.Spring的缓存抽象 1 ...
- gunicorn的作用
gunicorn是什么: gunicorn是一种unix上被广泛使用的Python WSGI UNIX HTTP Server WSGI是什么: 先说下 WSGI 的表面意思,Web Server G ...