Detailed explanation of modal pop-up component of WeChat applet

This article mainly introduces relevant information on the detailed explanation of the WeChat Mini Program modal pop-up component, and attaches simple examples. Friends in need can refer to

WeChat Mini Program modal:

Here the MODAL components in the WeChat Mini Program have detailed analysis. I want to develop a small partner for developing WeChat Mini Program. Here I record the main points of MODAL.

#modal

modal is similar to the confirm pop-up box in javascript. By default, it is a pop-up box with confirmation and cancellation. However, the pop-up box will not appear after clicking cancel. To automatically hide, you need to control the hidden attribute by triggering an event and calling a function.

Official Document

##.wxml

<modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
  这是对话框的内容。
</modal>

.js

Page({
  data:{
    hidden:false,
    nocancel:false
  },
  cancel: function(){
    this.setData({
       hidden: true
    });
  },
  confirm: function(){
    this.setData({
       nocancel: !this.data.nocancel
    });  
    console.log("clicked confirm");
  }
})

Running effect

The above is the detailed content of Detailed explanation of modal pop-up component of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!