微信小程序之model弹框

最新推荐文章于 2025-09-09 15:49:53 发布

原创最新推荐文章于 2025-09-09 15:49:53 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

微信小程序

10 篇文章

订阅专栏

本文详细介绍了小程序中两种常见的modal弹出框实现方法：一种通过WXML和JS结合，另一种通过纯JS调用wx.showModal。重点讲解了各自的代码结构和使用场景。

小程序model表达形式一般有两种：

1. 第一种：

wxml：
<button type="primary" bindtap="click">按钮</button>
<modal class="modal"  title='这是标题' confirm-text="确认" hidden="{{modalHidden}}" cancel-text="取消" bindcancel='modalCancel' bindconfirm='modalConfirm'>
这里是内容
</modal>

js：
Page({
  data: {
      modalHidden:true 
  }, 

  click:function(){
      
      this.setData({
          modalHidden:!modalHidden
        });

  },

  //模态框取消
  modalCancel(){
    wx.showToast({
      title: '取消提交',
      icon:'none'
    })
    this.setData({
      modalHidden:true, //都可以
    })
  },
})

2. 第二种：

js不同：

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