微信小程序常用的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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
用JS实现的一个include函数
2007/07/21 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python AES加密模块用法分析
2017/05/22 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python微信操控itchat的方法
2019/05/31 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
SQL面试题
2013/04/30 面试题
Why do we need Unit test
2013/01/03 面试题
物理专业本科生自荐信
2014/01/30 职场文书
理发店策划方案
2014/06/05 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电