WeChat ミニ プログラムにカスタム トーストを実装する方法

この記事は主にWeChatミニプログラムでのカスタムトーストの実装方法を紹介し、WeChatミニプログラムに付属するトーストの使用法を簡単に説明し、サンプルの形でカスタムトーストの定義と使用法を分析します。必要な友人は参考にすることができます。それ

この記事の例では、WeChat アプレットでのカスタム トーストの実装方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. WeChat の公式デフォルト トースト

トーストは、ほとんどすべてのアプリにこのような特殊効果があります。まず、トーストを見てみましょう。ミニプログラムに付属のエフェクト。すぐに死にたくなりました~~

WeChat 独自のトーストエフェクト:

js ファイル:

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

使い方は非常に簡単ですが、公式のミニプログラムにはいくつかの問題があります。成功のみを表示し、2 つのアイコンをロードしています

、アイコンは削除できません

最大継続時間は 10 秒です

2. カスタム トースト最も一般的なトーストは下の方にあり、高さは比較的小さいです~~

最初に効果を見てください:

簡単そうに見えますが、実装するのは簡単ではありません: 実装方法:

1) すべてのページでトーストを使用する必要があるため、パブリック トースト テンプレート ファイルを作成します。

<!-- 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 は主に次のような使い方があります

コアコード:

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

このコードはコアであり、

現在のページのデータをトーストにバインドします。

getCurrentPages().length - 1 表示可以获得当前页面的page，只有获得了page，才能通过page.setDataコアコード:

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

このコードには、トーストが消えるときにスローなアニメーション効果があります。

上記は私があなたのためにまとめたものです。

関連記事:

vue+swiperで横スライドメニュー効果を実装する方法

Angularを使った三角矢印ラベル機能の実装方法

Angularを使ったタイマー機能の実装方法

JSの遅延隠蔽機能で実装する方法

以上がWeChat ミニ プログラムにカスタム トーストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。