Home > WeChat Applet > Mini Program Development > Detailed explanation of modal pop-up component of WeChat applet

Detailed explanation of modal pop-up component of WeChat applet

巴扎黑
Release: 2017-04-01 15:56:53
Original
2771 people have browsed it

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>
Copy after login

.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");
  }
})
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template