微信小程序常用的3种提示弹窗实现详解


Posted in Javascript onSeptember 19, 2019

1. 表示操作成功,文字上方会显示一个表示操作成功的图标。

微信小程序常用的3种提示弹窗实现详解

wx.showToast({
  title: '操作成功!', // 标题
  icon: 'success',  // 图标类型,默认success
  duration: 1500  // 提示窗停留时间,默认1500ms
})

2.表示加载中,显示为加载中图标。

微信小程序常用的3种提示弹窗实现详解

wx.showToast({
  title: '加载中...',
  icon: 'loading',
  duration: 1500
})

3.不显示图标,一般用作提示。

微信小程序常用的3种提示弹窗实现详解

wx.showToast({
  title: '该功能未上线!',
  icon: 'none',
  duration: 1500
})

以上3种弹窗均使用wx.showToast接口,调用后会根据设定的duration停留一定时间。

此外,表示加载中的弹窗还可以使用wx.showLoading接口,但调用该接口时弹窗并不会自动消失,而是需要手动调用wx.hideLoading接口使弹窗消失。

// 开始加载数据
wx.showLoading({
 title: '加载中',
})
// 数据加载中... // 数据加载中...
// 数据加载完成,隐藏弹窗
wx.hideLoading()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
JS搜狐面试题分析
Dec 16 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 #Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 #Javascript
node 标准输入流和输出流代码实例
Sep 19 #Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 #Javascript
微信小程序3D轮播实现代码
Sep 19 #Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 #Javascript
You might like
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
python修改字典内key对应值的方法
2015/07/11 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
利用python发送和接收邮件
2016/09/27 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
python如何构建mock接口服务
2021/01/28 Python
Python实现简单猜数字游戏
2021/02/03 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
工作批评与自我批评范文
2014/10/16 职场文书
2015年营业员工作总结
2015/04/23 职场文书
早恋主题班会
2015/08/14 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python