Présentation de trois mini-événements de programme

Cet article explique comment utiliser les événements du mini-programme WeChat.

1 : Événement bouillonnant

à WeChatDans le mini outil de développement de programme, créez un nouveau dossier d'événements, créez un nouveau fichier et remplissez le code suivant dans event.wxml :

1. <view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">
     这里是view 1
       <view class="view2" bindtap="view2click" id="view2">
            这里是view 2
             <view class="view3" bindtap="view3click" id="view3">
                  这里是view 3
             </view>
       </view>
   </view>

   Copier après la connexion

Remplissez le code suivant en événement.wxss :

.view1{
  height: 500rpx;
  width: 100%;
  background-color:beige;
}
.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}

1. .view3{
     height: 300rpx;
     width: 60%;
     background-color:aqua;
   }

   Copier après la connexion

Ajoutez le code suivant à event.js :

1. //事件处理函数
     view1click : function(event){
       console.log("view1click")
     },
     view2click : function(){
       console.log("view2click")
     },
     view3click : function(event){
        console.log("view3click")
     },

   Copier après la connexion

Compilez et exécutez, puis cliquez sur View3 résultat de la zone dans le simulateur Comme le montre la figure 1 : Vous pouvez voir qu'en plus de view3, les événements de clic de view2 et view1 ont répondu. Il s'agit de l'événement de clic bouillonnant

<🎜. >

Figure 1

2 : Bloquer les événements bouillonnants

volonté

1. <view class="view3" bindtap="view3click" id="view3">

   Copier après la connexion

a été remplacé par

1. <view class="view3" catchtap="view3click" id="view3">

   Copier après la connexion

--- est remplacé par : catchtap

Les autres codes restent inchangés, compilez et exécutez ou cliquez sur la zone view3, vérifiez les informations du journal, comme le montre la figure 2, l'événement ne bouillonne plus Figure 2

3 : Informations sur l'événement entrantes

view1click : function(event)Ajoutez le code pour imprimer les informations sur l'événement entrant comme suit : Compilez et exécutez comme indiqué dans la figure 3 :

1. view1click : function(event){
       console.log("view1click")
       console.log(event)
     }

   Copier après la connexion
Figure 3

L'ensemble de données contient l'attribut personnalisé, id : 100, titre : "News Title", Cet attribut personnalisé est défini dans le code suivant :

[Recommandations associées]

1. Recommandation spéciale : Téléchargement de la version V0.1 de "php Programmer Toolbox"

2. Téléchargement complet du code source de l'applet WeChat

3. Démo du mini programme WeChat : centre commercial d'imitation