Detailed explanation and example code of WeChat mini program modal

高洛峰
Release: 2017-02-13 10:47:41
Original
1824 people have browsed it

This article mainly introduces the detailed explanation and example code of the WeChat Mini Program modal. Friends who need it can refer to the

WeChat Mini Program modal

dialogue Pop-up window


##Property nameTypeDefault valueDescription##titlehiddenno-cancelconfirm-textcancel-textbindconfirmbindcancelExample:
String Title
Boolean false Whether to hide the entire pop-up window
Boolean false Whether to hide the cancel button
String Confirm confirm button text
String Cancel cancel button text
EventHandle Callback triggered by click confirmation
EventHandle Click to cancel and the callback triggered by the mask


<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
 这是对话框的内容。
</modal>

<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
 <view> 没有标题没有蒙层没有确定的modal </view>
 <view> 内容可以插入节点 </view>
</modal>

<view class="btn-area">
 <button type="default" bindtap="modalTap">点击弹出modal</button>
 <button type="default" bindtap="modalTap2">点击弹出modal2</button>
</view>
Copy after login

Page({
 data: {
 modalHidden: true,
 modalHidden2: true
 },
 modalTap: function(e) {
 this.setData({
 modalHidden: false
 })
 },
 modalChange: function(e) {
 this.setData({
 modalHidden: true
 })
 },
 modalTap2: function(e) {
 this.setData({
 modalHidden2: false
 })
 },
 modalChange2: function(e) {
 this.setData({
 modalHidden2: true
 })
 },
})
Copy after login

微信小程序  modal详解及实例代码#Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more WeChat applet modal details and example code related articles, please pay attention to 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