微信小程序常用的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弹出的对话窗口永远保持居中显示
Dec 15 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
js实现旋转的星空效果
Nov 01 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
xml+php动态载入与分页
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python实现获取某天是某个月中的第几周
2015/02/11 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Django websocket原理及功能实现代码
2020/11/14 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
电力公司个人求职信范文
2014/02/04 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
作文批改评语大全
2014/04/23 职场文书
大学新生入学教育方案
2014/05/16 职场文书
网络营销计划
2015/01/17 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
《赵州桥》教学反思
2016/02/17 职场文书