微信小程序之界面交互反馈
交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯。
在小程序中是通过一下几种方式实现的:
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) // ...
随机推荐
- jupyternotebook安装
本篇阅读目录 一.Jupyter notebook环境安装 二.爬虫介绍 回到顶部 一.Jupyter notebook环境安装 1.Anaconda 以及 安装步骤 Anaconda指的是一个开源的 ...
- python安装包的3的方式
1.pip pip install 包名 2.压缩包(针对pip安装不上) 1.下载源码解压(压缩包有setup.py) 2.python setup.py install 3.****.whl文件 ...
- 使用GUI工具Portainer.io管控Docker容器
背景 5年前容器技术扑面而来,如今已经成为面向云原生开发的基础架构,基于微服务的设计需要部署大量容器,同时强调了友好快速的管理容器. 是时候推荐一个轮子Portainer.io:提供GUI界面的容器管 ...
- 【Weiss】【第03章】练习3.3:通过交换指针交换单/双链表元素
[练习3.3] 通过之调整指针(而不是数据)来交换两个相邻的元素,使用 a.单链表 b.双链表 Answer: 先放测试代码,折叠标题可以看到分别是哪种链表的测试. 实测可满足题意,但单链表和双链表的 ...
- 2019.3.14解题报告&补题报告
A题 题意: 输入r, c,代表r*c的矩阵,接下来一行,是r个数,代表每一行里最大的数:接下来一行,是c个数,代表每一列中的最大数.求所给数据是否冲突. 思路:判断r个数中最大数maxr和c个数中最 ...
- iOS开发技术 - 二维码扫描、生成
QRecLevel:QR_ECLEVEL_H // 二维码容错率,最高为30%(即QR_ECLEVEL_H),即LOGO有大 ...
- weblogic漏洞练习
About WebLogic WebLogic是美商Oracle的主要产品之一,系购并得来.是商业市场上主要的Java(J2EE)应用服务器软件(application server)之一,是世界上第 ...
- Beef xss神器
KALI中启动BEEFXSS PAYLOAD为 <script src=”http://攻击机IP:3000/hook.js”></script> 将攻击代码插入到存储型XSS ...
- Linux 基础篇(二)
1.linux 关机和重启 关机: shutdown -h 10:20 # 指定时间关机 shutdown -h now # 马上关机 shutdown -h +10 # 10分钟后关机 ...
- python3正则提取字符串里的中文
# -*- coding: utf-8 -*- import re #过滤掉除了中文以外的字符 str = "hello,world!!%[545]你好234世界..." str ...