微信小程序常用的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 css在IE和Firefox中区别分析
Feb 18 Javascript
javascript面向对象编程代码
Dec 19 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
js 获取、清空input type="file"的值(示例代码)
Dec 24 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
js实现菜单跳转效果
Dec 11 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实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
用python与文件进行交互的方法
2018/03/01 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
简历中的自我评价范文
2014/02/05 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
论文指导教师评语
2014/04/28 职场文书
工会趣味活动方案
2014/08/18 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
法人委托书范本
2014/09/15 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
雷锋的观后感
2015/06/10 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书