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

小云云
Libérer: 2017-12-07 15:53:11
original
2915 Les gens l'ont consulté

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
})
Copier après la connexion


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>
Copier après la connexion


2) JS a principalement l'utilisation suivante

Code principal :


let pages = getCurrentPages();
let curPage = pages[pages.length - 1];
Copier après la connexion


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();
Copier après la connexion


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!

É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