微信小程序 --- model弹框

Posted 2020-10-25 帅到要去报警

model弹框：在屏幕中间弹出，让你进行选择：

效果：

代码：

<button type="primary" bindtap="btnclick">按钮</button>
<modal title="标题" confirm-text="确认" cancel-text="取消" hidden="onOff" bindconfirm="modalConfirm" bindcancel="modalCancel">
这里是会话内容
</modal>

page.js：

//获取应用实例
const app = getApp()
Page({
  data: {
      onOff:true 
  }, 
  btnclick:function(){
      var onOff = this.data.onOff;
      this.setData({onOff:!onOff});
  }
})

 还可以使用JS：

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

具体的参数：

title：提示的标题；

content：提示的内容；

showCancel ：是否显示取消按钮，默认是 false

canceText：取消按钮的文字，默认是 “取消”

canceColor：取消按钮的文字颜色，默认是 #000

confirmText：确定按钮的文字。默认是 确定

confirmColor：确定按钮的文字颜色。默认是 “#3CC5IF”

success：接口调用成功的回调函数。返回 res.confirm ==1时，表示用户点击。

fail：接口调用失败的回调函数。

complete：接口调用结束的回调函数（调用成功或者失败都会执行）