How to customize toast implementation in WeChat applet-Mini Program Development-php.cn

How to customize toast implementation in WeChat applet

不言

Release： 2018-06-26 15:53:19

Original

2871 people have browsed it

This article mainly introduces the implementation method of custom toast in WeChat applet, briefly describes the use of toast that comes with WeChat applet, and analyzes the definition and use of custom toast in the form of examples. Friends in need can refer to it. Next

The example in this article describes the implementation method of custom toast in WeChat applet. Share it with everyone for your reference, the details are as follows:

1. WeChat official default toast

toast is the most common, almost every App has it There is such a special effect. Let’s take a look at the toast effect that comes with the mini program. I immediately want to die~~

The toast effect that comes with WeChat:

js file:

wx.showToast({
 title: &#39;成功&#39;,
 icon: &#39;success&#39;,
 duration: 2000
})

Copy after login

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

can only display success, Loading two icons

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 looks like Simple, it is quite difficult to implement. How to implement:

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>

Copy after login

2) JS mainly has the following usage

Core code:

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

Copy after login

This code is the core,

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

Core code:

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

Copy after login

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the GET request of the WeChat applet

Analysis of the WeChat applet template template

Introduction to the bottom navigation of tabBar in WeChat Mini Program

The above is the detailed content of How to customize toast implementation in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!