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

效果图

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

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界面布局设计入门到精通