小程序的模态框和提示框

最新推荐文章于 2025-04-23 07:30:00 发布

kzrl

最新推荐文章于 2025-04-23 07:30:00 发布

阅读量2k

点赞数

分类专栏：微信开发

本文链接：https://blog.youkuaiyun.com/u012885438/article/details/75528407

版权

微信开发专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了微信小程序中两种常见的交互组件：模态弹窗（modal）及消息提示框（showToast）的具体用法。通过XML与JS代码展示了如何创建退出确认弹窗，并提供了使用wx.showModal与wx.showToast进行提示反馈的示例。

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

一、modal

xml

<!--弹出框-->
<modal
 title="退出应用"
  hidden="{{hiddenModal}}"
  confirm-text="再看看"
  cancel-text="退出"
  bindconfirm="listenerConfirm"
  bindcancel="listenerCancel" >
  您是否真的要退出应用
  </modal>

 listenerButton:function() {
  this.setData({
   hiddenModal: !this.data.hiddenModal
  })
 },
 
 listenerConfirm:function() {
  this.setData({
   hiddenModal: true
  })
 },
 
 listenerCancel:function() {
  this.setData({
   hiddenModal: true
  })
 },

二、 wx.showModal(OBJECT)

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

提示框：

wx.showToast(OBJECT)

显示消息提示框

OBJECT参数说明：

示例代码：

1

2

3

4

5

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

wx.hideToast()

隐藏消息提示框

 
         wx.showToast({ 
        
         title:  
         '加载中' 
         , 
        
         icon:  
         'loading' 
         , 
        
         duration: 10000 
        
         }) 
        
         setTimeout( 
         function 
         (){ 
        
         wx.hideToast() 
        
         },2000)

示例代码：

1

2

3

4

5

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

wx.hideToast()

隐藏消息提示框

 
            wx.showToast({ 
           
            title:  
            '加载中' 
            , 
           
            icon:  
            'loading' 
            , 
           
            duration: 10000 
           
            }) 
           
            setTimeout( 
            function 
            (){ 
           
            wx.hideToast() 
           
            },2000)