微信小程序常用的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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
简单了解three.js 着色器材质
Aug 03 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python实现批量下载文件
2015/05/17 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
环保倡议书500字
2014/05/15 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android