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();

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

関連する推奨事項:

WeChatアプレットのスライダーコンポーネントでラベルの透明度を動的に変更する方法

WeChatアプレットに画像拡大プレビュー機能を実装する方法

WeChatアプレットで共有するときに写真をカスタマイズする新機能

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