Maison > Applet WeChat > Développement de mini-programmes > Événements du mini-programme WeChat

Événements du mini-programme WeChat

高洛峰
Libérer: 2017-03-01 11:43:15
original
1569 Les gens l'ont consulté

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

1 : bouillonnement d'événements

Dans l'outil de développement d'applets WeChat, créez un nouveau dossier d'événements, créez un nouveau fichier et remplissez le code suivant dans event.wxml :

<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 dans event.wxss :

.view1{
  height: 500rpx;
  width: 100%;
  background-color:beige;
}
Copier après la connexion
.view2{
  height: 400rpx;
  width: 80%;
  background-color: red;
}
Copier après la connexion
.view3{
  height: 300rpx;
  width: 60%;
  background-color:aqua;
}
Copier après la connexion

Ajoutez le code suivant dans event. .js :

//事件处理函数
  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 la zone view3 dans le simulateur. Le résultat est présenté dans 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 Bubbling

 微信小程序事件

2 : Pour empêcher l'événement de bouillonner

, remplacez

<view class="view3" bindtap="view3click" id="view3">
Copier après la connexion

par <🎜. >

<view class="view3" catchtap="view3click" id="view3">
Copier après la connexion
---Modifiez-le en : catchtap

L'autre code reste inchangé, compilez et exécutez, ou cliquez sur la zone view3 pour afficher les informations du journal, comme le montre la figure 2, l'événement no bulles plus longues

 微信小程序事件

3 : Les informations sur l'événement sont transmises


Dans le code ci-dessus : view1click : la fonction (événement) ajoute le code pour imprimer le informations sur l'événement entrant comme suit : Compilez et exécutez comme indiqué dans la figure 3 :

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

    console.log(event)

  }
Copier après la connexion

 微信小程序事件

L'ensemble de données contient des attributs personnalisés, identifiant : 100, titre : "Titre de l'actualité" , cet attribut personnalisé est défini dans le code suivant :

<view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">
Copier après la connexion
Pour plus d'articles liés aux événements du mini-programme WeChat, veuillez faire attention au site Web PHP 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
Derniers numéros
微信小程序
Depuis 1970-01-01 08:00:00
0
0
0
微信小程序轮播
Depuis 1970-01-01 08:00:00
0
0
0
现在个人嫩申请微信小程序
Depuis 1970-01-01 08:00:00
0
0
0
現在個人嫩申請微信小程序
Depuis 1970-01-01 08:00:00
0
0
0
微信小程序自动补全工具
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal