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

版权声明:摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86416459

效果图

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

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

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

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界面布局设计入门到精通
https://ke.qq.com/course/348627?tuin=2b10d56

猜你喜欢

转载自blog.csdn.net/u013818205/article/details/86416459
今日推荐