Maison > Applet WeChat > Développement de mini-programmes > L'applet WeChat utilise un composant modal pour faire apparaître un exemple de partage de boîte de dialogue

L'applet WeChat utilise un composant modal pour faire apparaître un exemple de partage de boîte de dialogue

小云云
Libérer: 2018-01-05 13:40:11
original
6448 Les gens l'ont consulté

Cet article présente principalement la fonction de boîte de dialogue contextuelle de l'applet WeChat à l'aide du composant modal, et analyse les attributs pertinents et les compétences opérationnelles de réponse aux événements du composant modèle de l'applet WeChat sous forme d'exemples. je peux m'y référer. J'espère que cela pourra aider tout le monde.

1. Affichage des effets

2. Code clé

①, index.wxml

<view>提示:{{tip}}</view>
<button type="default" bindtap="showModal">点击我弹出modal对话框</button>
<view>
 <modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好,我是modal对话框</modal>
</view>
Copier après la connexion

②, index.js

Page({
 data:{
  // text:"这是一个页面"
  tip:&#39;&#39;,
  buttonDisabled:false,
  modalHidden:true,
  show:false
 },
 showModal:function(){
  this.setData({
   modalHidden:!this.data.modalHidden
  })
 },
 modalBindaconfirm:function(){
   this.setData({
   modalHidden:!this.data.modalHidden,
   show:!this.data.show,
   tip:&#39;您点击了【确认】按钮!&#39;,
   buttonDisabled:!this.data.buttonDisabled
  })
 },
 modalBindcancel:function(){
   this.setData({
   modalHidden:!this.data.modalHidden,
   tip:&#39;您点击了【取消】按钮!&#39;
  })
 }
})
Copier après la connexion

Recommandations associées :

WeChat Introduction détaillée du composant modal du mini programme

Comment utiliser le composant modal de Bootstrap pour personnaliser les boîtes de dialogue d'alerte, de confirmation et modales_compétences javascript

WeChat mini Explication détaillée du composant pop-up modal du programme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal