Home  >  Article  >  WeChat Applet  >  Detailed explanation of modal pop-up component of WeChat applet

Detailed explanation of modal pop-up component of WeChat applet

巴扎黑
巴扎黑Original
2017-04-01 15:56:532749browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn