Detailed explanation of the implementation method of custom toast in WeChat applet

We have shared many tutorials about WeChat mini programs before. In this article, we mainly introduce the implementation method of custom toast in WeChat mini programs, briefly describe the use of toast that comes with WeChat mini programs, and analyze the definition of custom toast in the form of examples. Friends in need can refer to the usage method.

1. WeChat’s official default toast

Toast is the most common. Almost every App has such special effects. Let’s take a look at the mini program first. The built-in toast effect makes me want to die immediately~~

The toast effect that comes with WeChat:

js file:

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

The usage is super simple, but the official mini program has several problems:

can only display two icons: success and loading.

And the icon cannot be removed

The maximum duration is 10 seconds

2. Custom toast

Our most common toast is towards the bottom, and the height is relatively small~~

Look at the effect first:

It seems simple, but it is implemented It is quite not simple. How to implement it:

1) Create a public toast template file, because every page needs to use 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 mainly has the following usage

Core code:

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

This code is the core. getCurrentPages().length - 1 means that the page of the current page can be obtained. Only by obtaining the page can the data of the current page be bound through page.setData to the toast.

Core code:

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

This code has a slow animation effect when the toast disappears.

Related recommendations:

How to dynamically modify label transparency in the WeChat applet slider component

How to implement the image enlargement preview function in the WeChat applet

New function of customizing pictures when sharing in WeChat applet

The above is the detailed content of Detailed explanation of the implementation method of custom toast in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!