当前位置: 首页 > 编程笔记 >

微信小程序常用的3种提示弹窗实现详解

欧浩淼
2023-03-14
本文向大家介绍微信小程序常用的3种提示弹窗实现详解,包括了微信小程序常用的3种提示弹窗实现详解的使用技巧和注意事项,需要的朋友参考一下

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()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序实现漂亮的弹窗效果,包括了微信小程序实现漂亮的弹窗效果的使用技巧和注意事项,需要的朋友参考一下 最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 场面一度十分尴尬 可是得做啊,要不然产品大姐又要暴走了…… 好吧,来研究一下模态对话框的性质自己DIY吧~ 实现思路 模态对话框之所以被叫做“模态”,就是因为

  • 本文向大家介绍微信小程序vant弹窗组件的实现方式,包括了微信小程序vant弹窗组件的实现方式的使用技巧和注意事项,需要的朋友参考一下 作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹

  • 本文向大家介绍微信小程序 自定义弹窗实现过程(附代码),包括了微信小程序 自定义弹窗实现过程(附代码)的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式:

  • 本文向大家介绍微信小程序封装自定义弹窗的实现代码,包括了微信小程序封装自定义弹窗的实现代码的使用技巧和注意事项,需要的朋友参考一下  最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件。记录一下。 具体代码如下: 业务代码中:   在业务代码中引入dialog组件即可 dialog组件:

  • 本文向大家介绍微信小程序实现自定义modal弹窗封装的方法,包括了微信小程序实现自定义modal弹窗封装的方法的使用技巧和注意事项,需要的朋友参考一下 前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关

  • 本文向大家介绍vue插件--仿微信小程序showModel实现模态提示窗功能,包括了vue插件--仿微信小程序showModel实现模态提示窗功能的使用技巧和注意事项,需要的朋友参考一下 效果图: 下面是源码: index.js model.vue 通过添加实例方法,把插件添加到vue.prototype上来实现。 在使用之前需要将插件挂载到Vue全局实例上: main.js 完成上述条件后,就可