Explication détaillée de la méthode de mise en œuvre du toast personnalisé dans l'applet WeChat

Nous avons déjà partagé de nombreux tutoriels sur les mini-programmes WeChat. Dans cet article, nous présentons principalement la méthode d'implémentation du toast personnalisé dans les mini-programmes WeChat, décrivons brièvement l'utilisation du toast fourni avec les mini-programmes WeChat et analysons les définition du toast personnalisé sous forme d'exemples. Les amis dans le besoin peuvent se référer à la méthode d'utilisation.

1. Le toast officiel par défaut de WeChat

Toast est le plus courant. Presque toutes les applications ont de tels effets spéciaux. mini programme d'abord. L'effet toast intégré me donne envie de mourir immédiatement ~~

L'effet toast fourni avec WeChat :

fichier js :

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

est super simple à utiliser, mais le mini programme officiel a plusieurs problèmes :

ne peut que afficher le succès et le chargement. Tapez l'icône

et l'icône ne peut pas être supprimée

La durée maximale est de 10 secondes

2. Toast personnalisé

Notre toast le plus courant est vers le bas et la hauteur est relativement petite ~~

Regardez d'abord l'effet :

Cela semble simple, ce n'est pas simple à mettre en œuvre. Comment le mettre en œuvre :

1) Créez un fichier de modèle de toast public, car chaque page doit utiliser toast

<!-- wetoast.wxml -->
<template name="wetoast">
 <view class="wetoast {{reveal ? &#39;wetoast_show&#39; : &#39;&#39;}}">
  <view class="wetoast__mask"></view>
  <view class="wetoast__bd {{position}}" animation="{{animationData}}">
   <block wx:if="{{title}}">
    <view class="wetoast__bd__title {{titleClassName || &#39;&#39;}}">{{title}}</view>
   </block>
  </view>
 </view>
</template>

2) JS a principalement l'utilisation suivante

Code principal :

let pages = getCurrentPages();
let curPage = pages[pages.length - 1];

Ce code est le noyau getCurrentPages().length - 1 signifie que la page de la page actuelle peut être obtenue. Ce n'est qu'en obtenant la page que les données de la page actuelle peuvent être liées au toast. via page.setData.

Code principal :

let animation = wx.createAnimation();
animation.opacity(1).step();

Ce code a un effet d'animation lent lorsque le toast disparaît.

Recommandations associées :

Comment modifier dynamiquement la transparence des étiquettes avec le composant de curseur d'applet WeChat

Comment implémenter la fonction d'aperçu d'agrandissement d'image dans WeChat applet

Nouvelle fonction de personnalisation des images lors du partage dans le mini programme WeChat

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!