So passen Sie die Toast-Implementierung im WeChat-Applet an

In diesem Artikel wird hauptsächlich die Implementierungsmethode des benutzerdefinierten Toasts im WeChat-Applet vorgestellt, die Verwendung des im WeChat-Applet enthaltenen Toasts kurz beschrieben und die Definition und Verwendung des benutzerdefinierten Toasts anhand von Beispielen analysiert Das Folgende

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des benutzerdefinierten Toasts im WeChat-Applet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Der offizielle Standard-Toast von WeChat

Der Toast ist am häufigsten. Fast jede App hat es. Bei solchen Spezialeffekten werfen Sie zunächst einen Blick auf den Toast-Effekt, der mit dem Miniprogramm geliefert wird, und Sie werden sofort sterben wollen~~

Der Toast-Effekt, der mit WeChat kommt:

js-Datei:

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

ist super einfach zu verwenden, aber das offizielle Miniprogramm hat mehrere Probleme:

kann nur den Erfolg anzeigen, zwei Symbole werden geladen

und das Symbol kann nicht entfernt werden

Die maximale Dauer beträgt 10 Sekunden

2. Benutzerdefinierter Toast

Unser häufigster Toast ist nach unten gerichtet und die Höhe ist relativ gering~~

Sehen Sie sich zuerst den Effekt an:

Es sieht einfach aus, ist aber nicht einfach zu implementieren. So implementieren Sie es:

1) Erstellen Sie eine öffentliche Toast-Vorlagendatei, da jede Seite Toast verwenden muss

<!-- 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 hat hauptsächlich die folgende Verwendung

Kerncode:

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

Dieser Code ist der KerngetCurrentPages().length - 1 bedeutet, dass die Seite der aktuellen Seite nur durch Abrufen der Seite an den Toast gebunden werden kann. page.setData

Kerncode:

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

Dieser Code hat einen langsamen Animationseffekt, wenn der Toast verschwindet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die GET-Anfrage des WeChat-Miniprogramms

Analyse der WeChat-Miniprogrammvorlage

Einführung in die TabBar-Navigation unten im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo passen Sie die Toast-Implementierung im WeChat-Applet an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!