微信小程序之界面交互反馈
交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯。
在小程序中是通过一下几种方式实现的:
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) // ...
随机推荐
- c++第一周测验
本次得分为:14.00/14.00, 本次测试的提交时间为:2020-03-08, 如果你认为本次测试成绩不理想,你可以选择再做一次. 1 单选(1分) 下面程序片段哪个没错? 得分/总分 A. in ...
- 阿里云centos安装oracle
目录 阿里云centos安装oracle 阿里云默认没有swap分区,oracle安装需要 安装Oracle所需的依赖包 创建用户和组 关闭SELINUX(阿里云缺省关闭) 开始安装 使用" ...
- 利用border-radius画椭圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- mongo密码的设置
MongoDB 版本 v4.0.7 系统 Win10 注意: 要为数据库创建用户,必须先切换到相应的数据库: 要为数据库创建用户,必须先切换到相应的数据库: 要为数据库创建用户,必须先切换到相应的数据 ...
- (转).balignl 16,0xdeadbeef浅析
原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201031102956976/ 最近在分析u-boot的源代码,看到这一行: .balig ...
- 数据挖掘入门系列教程(五)之Apriori算法Python实现
数据挖掘入门系列教程(五)之Apriori算法Python实现 加载数据集 获得训练集 频繁项的生成 生成规则 获得support 获得confidence 获得Lift 进行验证 总结 参考 数据挖 ...
- 三、create-react-app新旧版中使用less和antd并修改主题颜色
引入less 如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行: npm run eject 如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才 ...
- 测试必知必会系列- Linux常用命令 - ps(重点)
21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 查看所 ...
- orale中pl/sql的数据类型总结
一.pl/sql的概念 pl/sql简单的说就是:sql语句+编程语言的特性. 二.pl/sql的优点 1.可以提高程序的运行效率,因为能够减少数据库的访问次数. 2.可以对复杂的业务逻辑进行封装 3 ...
- Mysql 查询天、周,月,季度、年的数据
Mysql 查询天.周,月,季度.年的数据 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 ...