微信小程序常用的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 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
树结构之JavaScript
Jan 24 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
angularjs实现的购物金额计算工具示例
May 08 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
vue滚动tab跟随切换效果
Jun 29 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
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
列车长先进事迹材料
2014/01/25 职场文书
银行贷款承诺书
2014/03/29 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
刑事和解协议书范本
2014/11/19 职场文书
公司岗位说明书
2015/10/08 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
七个Python必备的GUI库
2021/04/27 Python
Pandas加速代码之避免使用for循环
2021/05/30 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技