微信小程序的几种弹出提示框

置顶゛Pudding

于 2020-04-13 11:48:10 发布

阅读量6.3k

点赞数 2

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_41408685/article/details/105484710

版权

小程序专栏收录该内容

24 篇文章

订阅专栏

本文介绍了微信小程序中四种常用的提示方式：wx.showToast用于简单消息提示，wx.showModal提供模态对话框功能，wx.showLoading展示加载提示，wx.showActionSheet则用于显示操作菜单，帮助提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.wx.showToast 消息提示框

//icon：success 成功图标，loading 加载图标 （7个汉字长度），none不显示（两行文字）
//image：设置自定义图标，优先级高于icon
//mask:显示蒙层
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

//隐藏消息提示框
wx.hideToast({})

2.wx.showModal 模态对话框

//showCancel:是否显示取消按钮
//cancelText，cancelColor，confirmText，confirmColor可设置
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

3.wx.showLoading loading 提示框

//需调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
  title: '加载中',
})

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

//隐藏 loading 提示框
wx.hideLoading({})

4.wx.showActionSheet 显示操作菜单

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
}