微信小程序弹窗提示:wx.showToast、wx.showModal、wx.showLoading的使用场景与实现

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

1、wx.showToast

使用场景:常规的提示,没有确定和取消按钮。

例:

微信小程序弹窗提示:wx.showToast、wx.showModal、wx.showLoading的使用场景与实现

属性:

title:提示的内容

icon:显示的图标,合法值有success、error、loading、none

image:自定义图标的本地路径,优先级高于icon

duration:提示的延迟时间

mask:是否显示透明蒙层,防止触摸穿透

success:API调用成功后的回调函数

fail:API调用失败后的回调函数

complete:API调用结束的回调函数(无论成功与否都会执行)

实现:

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

2、wx.showModal

使用场景:一般为公告或(用户的不合理行为)提供提示,带有确定和取消按钮。

例:

微信小程序弹窗提示:wx.showToast、wx.showModal、wx.showLoading的使用场景与实现

属性:

title:提示的标题

content:提示的内容

showCancel:是否显示取消按钮

cancelText:取消按钮的文字,最多4个字符

cancelColor:取消按钮的文字颜色,必须是16进制格式的颜色字符串

confirmText:确认按钮的文字,最多4个字符

confirmColor:确认按钮的文字颜色,必须是16进制格式的颜色字符串

editable:是否显示输入框

placeholderText:显示输入框时的提示文本

success:接口调用成功的回调函数

fail:接口调用失败的回调函数

complete:接口调用结束的回调函数(调用成功、失败都会执行)

示例:

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

3、wx.showLoading

使用场景:用户等待时的提示

例:

微信小程序弹窗提示:wx.showToast、wx.showModal、wx.showLoading的使用场景与实现

属性:

title:提示的内容

mask:是否显示透明蒙层,防止触摸穿透

success:接口调用成功的回调函数

fail:接口调用失败的回调函数

complete:接口调用结束的回调函数(调用成功、失败都会执行)

示例:

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

 文章来源地址https://www.toymoban.com/news/detail-484433.html

到了这里,关于微信小程序弹窗提示:wx.showToast、wx.showModal、wx.showLoading的使用场景与实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序wx.showModal中content换行

    content是modal提示框中的提示文字,今天在开发中遇到将提示文字换行的操作具体如下图 查资料可知通过  \\\'rn\\\'  可以实现换行操作,但在开发工具中不换行,可能是BUG    

    2024年02月13日
    浏览(30)
  • 微信小程序wx.showModal模态对话框中content换行

    解决方案:使用“rn”换行 注意:微信开发者工具上并不会换行只是会有空格,但是实际运行手机上是有换行效果的!  这是微信开发者工具的效果: 这是手机上显示的效果:          .join(\\\'\\\') 将数组用\\\"\\\"连接成为一个字符串         .slice(0, -4) 截取掉数组最后一项的

    2024年02月03日
    浏览(28)
  • 微信小程序开发系列(二十九)·界面交互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日
    浏览(32)
  • 微信小程序toast组件(解决wx.showToast文本最多显示两行问题)

    创建toast组件  index.wxmi index.less index.json index.ts toast.js 使用 index.json index.wxml  index.ts  效果

    2024年02月12日
    浏览(78)
  • 【微信小程序】wx.requestSubscribeMessage无法唤起小程序订阅弹窗

    报错信息: requestSubscribeMessage:fail can only be invoked by user TAP gesture. 报错原因:在某个场景的方法里面调用而不是直接通过用户点击 解决方法:一般可做成显示一个弹框友好的提示用户,然后再让用户点击按钮去手动触发订阅

    2024年02月12日
    浏览(33)
  • 微信小程序wx.getLocation 真机调试不出现隐私弹窗

            在小程序的开发过程中,首页中包含要获取用户地理位置的功能,所以在这里的onLoad()中调用了wx.getLocation(),模拟调试时一切正常,但到了真机环境中就隐私框就不再弹出,并且出现了报错,在打印之后发现getLocation的成功和失败均没有进行          (设置

    2024年04月16日
    浏览(29)
  • 微信小程序的弹窗提示

     第一种:弹出提示框,用户可以选择确定或者取消,且都带有回调。  第二种直接弹出成功的 用户无法选择确定与取消   第三种:等待中...   第四种:无任何图标仅仅只是展示    第五种:弹窗提示选项

    2024年02月11日
    浏览(61)
  • 微信小程序-全局倒计时+全局弹窗提示

    1、在计时页面中点击【开始】按钮开始倒计时,当退出该页面时计时仍然继续 2、计时结束后,弹出提示(无论当前处于哪个页面) 一、全局定义 1、app.json:加上下面这个 2、app.wxss:需要导入dialog.wxss,否则自定义的弹窗样式失效 3、app.js:实现倒计时+设置变量监听器 二、

    2024年02月10日
    浏览(33)
  • 微信小程序几种常用弹窗提示方法

    1.提示文字 可以设置显示时间(仅提示时使用)duration设置时间 不显示icon,此时 title文字最多可显示两行 也可以显示icon,显示icon文字最多显示 7 个汉字长度 icon常用的有:success、error、loading 示例图片 2.模态对话框  可以确认和关闭 如图   3.loading 提示框 显示 loading 提示框

    2024年02月11日
    浏览(32)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包