小程序的三种弹框showToast、showModal、showLoading

这篇具有很好参考价值的文章主要介绍了小程序的三种弹框showToast、showModal、showLoading。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序常用的三种弹框有:

        showToast:消息提示框

        showModal:模态对话框

        showLoading:加载框

第一:  showToast:消息提示框

小程序的三种弹框showToast、showModal、showLoading

默认的样式

小程序的三种弹框showToast、showModal、showLoading

自定义icon图标

具体代码如下:

wx.showToast({
    title: '成功',//提示内容
    icon: 'loading',//图标(success成功图标、error失败图标、loading加载图标、none不显示图标)
    image:'../../img/001.png',//自定义图标的本地路径,image层级高于icon
    duration: 2000,//提示的延时时间
    mask:true,//是否显示透明蒙层,防止触摸穿透
    success(){},//调用成功函数
    fail(){},//调用失败函数
    complete(){},//成功/失败调用都会执行
})

官方文档地址:wx.showToast(Object object) | 微信开放文档 

第二:showModal:模态对话框

小程序的三种弹框showToast、showModal、showLoading

具体代码如下:

wx.showModal({
    title: '提示',
    content: '这是一个模态弹窗',//editable如果为true,这就是输入框的内容
    editable:true,//是否显示输入框
    placeholderText:'请输入内容吧',//输入框的默认内容
    success (res) {
      if (res.confirm) {
        console.log('用户点击确定',res)
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
})

 官方文档地址:wx.showModal(Object object) | 微信开放文档

第三:showLoading:加载框

具体代码如下:

wx.showLoading({
    title:'加载中...'
})
setTimeout(function () {
    wx.hideLoading()
},2000)

 官方文档地址:wx.showLoading(Object object) | 微信开放文档文章来源地址https://www.toymoban.com/news/detail-501914.html

到了这里,关于小程序的三种弹框showToast、showModal、showLoading的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框

    目录 1.  loading 提示框 1. 1  wx.showLoading()显示loading提示框 1.2  wx.hideLoading()关闭 loading 提示框 2.  showModal 模态对话框 3.  showToast 消息提示框         小程序提供了一些用于界面交互的 API,例如:loading 提示框、消息提示框、模态对话框等 API。 loading 提示框常配合网络请

    2024年03月25日
    浏览(41)
  • H5跳小程序的三种方法

    需要调用微信jssdk中的方法 此种不支持直接跳转其他小程序,需要先跳转到本小程序的一个空页面,然后在当前这个空页面的onload方法里面跳转其他第三方小程序 H5页面: 小程序空页面:

    2024年02月16日
    浏览(37)
  • H5页面跳转小程序的三种方式

    实际开发中,小程序和H5往往有很多业务场景需要来回跳转,这里主要介绍三种跳转方式供大家参考。 场景:微信小程序登录有时候需要和公众号进行绑定,获取公众号code和appid传给后台进行绑定 该接口用于获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起

    2024年01月25日
    浏览(69)
  • 【微信小程序】使用自定义字体的三种方法

    小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多。必须https且同源,canvas等原生组件不支持。注意!!使用本地文件无效,必须使用网络地址。 官方文档:wx.loadFontFace(Object object) | 微信开放文档 演示代码: 传统的css规则,跟loadFontFace限制一样,必须https且同

    2024年02月08日
    浏览(50)
  • 小程序绑定跳转视频号的三种方式

    一、跳转方式 小程序绑定视频号需要用户打开视频号助手channels.weixin.qq.com,复制视频号ID username,和需要绑定的视频ID feedId,两者缺一不可。 关键代码: 二、内嵌视频号视频 从基础库版本2.25.1至2.31.1,小程序需与视频号视频相同主体或关联主体 从基础库版本2.31.1开始,非

    2024年02月03日
    浏览(50)
  • 西门子S7-300/400的三种程序上传/下载方式

    MPI(协议)下载对应的电气口是485口(硬件)。需要用到USB-485西门子专用编程电缆。 DP(协议)下载对应的电气口也是485口(硬件)。同样需要用到USB-485西门子专用编程电缆。 电气接口和MPI的485电气接口一样(有时候是同一个)。 TCP/IP(协议)下载对应的电气口是网卡(

    2023年04月16日
    浏览(114)
  • 小程序中引入外部字体的三种方式以及出现的问题

    需求:输入一段标题后,可选择不同的字体显示在页面上。 免费的商用字体下载链接: 链接: https://pan.baidu.com/s/1XLabx_xzC5kJycv7ejJU8Q 提取码: ka4r 1、打开https://transfonter.org/ 2、引入ttf或其他格式的文件,勾选banse64格式输出 3、将输出的文件下载到本地,引入到wxss里面 优点 :加

    2024年02月09日
    浏览(43)
  • 使用 GNU 汇编语法编写 Hello World 程序的三种方法

    本篇我们使用汇编来写一个经典的  Hello world  程序。 运行环境: OS:Ubuntu 18.04.5 LTS x86-64 gcc:version 4.8.5 在用户空间编写汇编程序输出字符串,有三种方法: 调用C库函数  printf 使用软中断  int 0x80 使用  syscall 系统调用 下面对三种方法,分别进行说明。 为了更好的理解汇

    2024年02月06日
    浏览(57)
  • 成为一个合格程序员所必备的三种常见LeetCode排序算法

    排序算法是一种通过特定的算法因式将一组或多组数据按照既定模式进行重新排序的方法。通过排序,我们可以得到一个新的序列,该序列遵循一定的规则并展现出一定的规律。经过排序处理后的数据可以更方便地进行筛选和计算,从而大大提高了计算效率。因此,掌握排序

    2024年01月17日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包