微信小程序常用的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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
jquery中this的使用说明
Sep 06 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python求素数示例分享
2014/02/16 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
迎元旦广播稿
2014/02/22 职场文书
人事部岗位职责范本
2014/03/05 职场文书
大课间体育活动方案
2014/03/12 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014年科研工作总结
2014/12/03 职场文书
看上去很美观后感
2015/06/10 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL