Code personnalisé de la fenêtre contextuelle de l'applet WeChat

不言
Libérer: 2018-06-23 14:38:28
original
2670 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'exemple de code de personnalisation de la fenêtre contextuelle du mini programme WeChat. Parfois, lors de la réalisation de projets de développement, il est nécessaire de modifier les composants du système d'origine en fonction des besoins du client. changez la fenêtre contextuelle dans le mini programme. Les amis dans le besoin peuvent se référer à la

Fenêtre contextuelle de l'applet WeChat

Premier code wxml :

<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view>
<view bindtap="clickArea">点击此处</view>  
Copier après la connexion

Remarque : L'attribut masqué est utilisé dans les endroits où les changements sont fréquents.

Code wxss pour définir le style de la fenêtre pop-up :

.myToast{
 width:240rpx;
 height:130rpx;
 line-height: 130rpx;
 margin:80rpx 35%;
 border-radius:20rpx;
 background-color: rgb(114,113,113);
 color:rgb(255,255,255);
 font-size: 36rpx;
 text-align: center;
 position: absolute;
 z-index: 100;
 opacity: 0.85;
}
Copier après la connexion

js :

Page({

 data:{
  nullHouse:true, //先设置隐藏
    },
 onLoad:function(options){
   // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 },
 clickArea:function(){
  var that = this;
  this.setData({
  nullHouse:false, //弹窗显示
  }) 
  setTimeout(function(){
  that.data.nullHouse = true, //1秒之后弹窗隐藏
   },1000)
 },
})
Copier après la connexion

Remarque : la fonction setTimeout() est asynchrone Lorsque l'ordinateur exécute setTimeout, la tâche est mise en pause et enregistrée. d'abord, puis continue Exécutez les tâches inachevées suivantes, et lorsque les conditions sont remplies, remettez la tâche d'exécution de setTimeout à l'arrière de la file d'attente des tâches, en attente d'exécution.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre d'une boîte d'invite de message dans l'applet WeChat

L'applet WeChat implémente le réglage dynamique des invites d'espace réservé. pour la sélection du texte et des boutons/état d'annulation

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