1. 表示操作成功,文字上方会显示一个表示操作成功的图标。

wx.showToast({
title: '操作成功!', // 标题
icon: 'success', // 图标类型,默认success
duration: 1500 // 提示窗停留时间,默认1500ms
})

2.表示加载中,显示为加载中图标。

wx.showToast({
title: '加载中...',
icon: 'loading',
duration: 1500
})

3.不显示图标,一般用作提示。

wx.showToast({
title: '该功能未上线!',
icon: 'none',
duration: 1500
})

以上3种弹窗均使用wx.showToast接口,调用后会根据设定的duration停留一定时间。

此外,表示加载中的弹窗还可以使用wx.showLoading接口,但调用该接口时弹窗并不会自动消失,而是需要手动调用wx.hideLoading接口使弹窗消失。

// 开始加载数据
wx.showLoading({
title: '加载中',
})

// 数据加载中...
// 数据加载中... // 数据加载完成,隐藏弹窗
wx.hideLoading()

完。

微信小程序常用的3种弹窗的更多相关文章

  1. 微信小程序常用样式汇总

    本文系转载: 原文作者:chenzheng8975 原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html 微信小程序常用样式汇总 小程序特 ...

  2. 微信小程序常用控件汇总

    1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...

  3. 微信小程序animation动画2种方法

    这里介绍 2 种方法一种是常规的小程序方法操作,另一种是引入动画库 1. 常规动画操作设置 wxml: <view> <view bindtap="clickMe" ...

  4. 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法

    异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...

  5. 微信小程序常用API组件开发

    关于小程序 张小龙定义小程序: 1.不需要下载安装即可使用: 2.用完即走,不用关心是否安装太多应用: 3.应用无处不在,随时可用. 特点: 1.适合业务逻辑简单的应用: 2,.适合低频应用: 3.适 ...

  6. 微信小程序 mode 的几种模式

    mode="aspectFill" mode 有效值: mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式. 模式 值 说明缩放 scaleToFill 不保持纵 ...

  7. 微信小程序常用的方法(留着用)

    function zero_fill_hex(num, digits) { let s = num.toString(16); while (s.length < digits) s = &qu ...

  8. 微信小程序——常用快捷键【四】

    格式调整 ctrl+[, ctrl+]:代码行缩进(向前|向后) ctrl+shift+[, ctrl+shift+] :折叠打开代码块 ctrl+C, ctrl+V:复制粘贴,如果没有选中任何文件则 ...

  9. 微信小程序之 真机键盘弹窗遮盖input框

    正常效果: 问题效果: 发现这个问题后呢,我先去看了api,api上是这么说的 哦吼~ 然后我也不知道是不是我的打开方式不对还是什么~~ 没有效果~~  那怎么办呢~~  换方法呗~~ 我只好用这个方 ...

随机推荐

  1. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  2. 6个美观的纯CSS渐变背景代码分享(亲测有效)

    样式1 background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%); 样式2 background-image: linear ...

  3. flink 1.7.2 安装详解

    ##flink 1.7.2 安装需要java环境 下载地址 https://flink.apache.org/downloads.html#1.单机版 #创建用户flinkuseradd flink ...

  4. c语言实现基本的数据结构(三) 栈

    #include <stdio.h> #include <tchar.h> #include <stdlib.h> #define StackSize 5 #def ...

  5. 本地在不安装Oracle的情况下安装PLSQL客户端

    本文解决问题:   通常在本地安装PLSQL后,如果本地没有安装Oracle数据库的话,PLSQL是不能使用的,输入远程数据库登录信息会提示:"Oracle Client没有正确安装&quo ...

  6. 如何使用python records 库优雅的操作数据库

    今天要介绍的这个python第三方库非常厉害,完美操作各种数据库.名字叫 records, 在网上很少有这个库的相关资料,但是在开源社区可是很火热的哦.如果这还不能打消你的顾虑,再告诉你一件事:如果你 ...

  7. vue-cli+vue 2.0+element-ui+vue-router+echarts.js开发后台管理系统项目教程

    一.首先使用npm创建vue项目框架: 1.安装vue-cli:    $ npm install --global vue-cli 2.初始化项目:$ npm init webpack  项目名 3 ...

  8. 记录一下vue transition 过渡各状态()

    .slide-fade-enter{   opacity: 0;   transform: translateX(100px);   /*从哪里开始过渡:在过渡之前我就把位置定义在100px的位置,并 ...

  9. egret之粒子系统

    1.添加粒子库,放在项目同级目录下(必须!!必须!!) 2.添加路径: 3.添加代码: private creatParticle(_pname: string, _target, _x: numbe ...

  10. 【数据库】MySQL 函数大全包含示例(涵盖了常用如时间、数字、字符串处理、数据流函数的和一些冷门的)

    ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/mysqlFunctionDesc 数学函数(Mathem ...