微信小程序常用的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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
js propertychange和oninput事件
Sep 28 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
python实现代理服务功能实例
2013/11/15 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Django 用户认证组件使用详解
2019/07/23 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Django如何重置migration的几种情景
2021/02/24 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
市场营销工作计划书
2014/09/15 职场文书
法定代表人免职证明
2015/06/24 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript