微信小程序weui在线入门教程-WeUi操作反馈-dialog对话框

素颜马尾好姑娘i 2024-02-19 15:50 57阅读 0赞

### 效果图 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
![微信小程序weui在线入门教程-WeUi操作反馈-dialog对话框][weui_-WeUi_-dialog]

![微信小程序weui在线入门教程-WeUi操作反馈-dialog对话框][weui_-WeUi_-dialog 1]

![微信小程序weui在线入门教程-WeUi操作反馈-dialog对话框][weui_-WeUi_-dialog 2]

> js代码

openConfirm: function () {
    
        wx.showModal({
    
          title: '弹窗标题',
    
          content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
    
          confirmText: "主操作",
    
          cancelText: "辅助操作",
    
          success: function (res) {
    
            console.log(res);
    
            if (res.confirm) {
    
              console.log('用户点击主操作')
    
            } else {
    
              console.log('用户点击辅助操作')
    
            }
    
          }
    
        });
    
      },
    
      openAlert: function () {
    
        wx.showModal({
    
          content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
    
          showCancel: false,
    
          success: function (res) {
    
            if (res.confirm) {
    
              console.log('用户点击确定')
    
            }
    
          }
    
        });
    
      },

> wxml代码

<view class="page">
    
      <view class="page__hd">
    
        <view class="page__title">Dialog</view>
    
        <view class="page__desc">对话框，采用小程序原生的modal</view>
    
      </view>
    
      <view class="page__bd">
    
        <view class="weui-btn-area">
    
          <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>
    
          <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
    
        </view>
    
      </view>
    
    </view>

[欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通][-WeUI]  
![https://ke.qq.com/course/348627?tuin=2b10d56][https_ke.qq.com_course_348627_tuin_2b10d56]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[weui_-WeUi_-dialog]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e21c94617c694207beb9e5347210f186.png
[weui_-WeUi_-dialog 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f84cd31542fa40d09ddd9689cac6897f.png
[weui_-WeUi_-dialog 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/62908635696a4d6e9123e7b845f5ed5b.png
[-WeUI]: https://ke.qq.com/course/348627?tuin=2b10d56
[https_ke.qq.com_course_348627_tuin_2b10d56]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7a142b7e3a7140eeaefb7884f4dff9f3.png