微信小程序api视频课程-界面-交互-wx.showModal 模态对话框的使用

ゞ浴缸里的玫瑰 2024-02-19 19:19 43阅读 0赞

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

### wxml代码 ###

wx.showModal(Object object)
    显示模态对话框
    
    <button bindtap="mt01">模态对话框01</button>
    
    <button bindtap="mt02">模态对话框02</button>

### js代码 ###

/**
       * 页面的初始数据
       */
      data: {
    
      },
      mt01:function(){
        wx.showModal({
          title: '提示标题',
          content: '模态框的内容',
        })
      },
      mt02:function(){
        wx.showModal({
          title: '提示标题',
          content: '模态框的内容',
          success(res){
            if(res.confirm)
            {
              console.log("用户点击了确定")
    
            }else if(res.cancel)
            {
              console.log("用户点击了取消")  
              
            }
          }
        })
      },

[欢迎大家收看我的视频教程：微信小程序常用API使用][API]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6d7f544817c5445180418873ec65704d.png
[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[API]: https://ke.qq.com/course/383235?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0d19127a571f4a3e9da1ecc1e91ac6bd.png