Detailed description of custom toast implementation methods for WeChat applets [with demo source code download] And toastdemo

Detailed description of customized toast Implementation Method of Applet [demo source code download], toastdemo

This article describes how to implement customized toast for applets. We will share this with you for your reference. The details are as follows:

1. Official default toast

Toast is the most common. Almost every App has such special effects. First, let's take a look at the toast effect that comes with the mini-App, and immediately let us know what we want to do ~~

Effects of built-in toast:

Js file:

Wx. showToast ({title: 'success', icon: 'success', duration: 2000 })

Simple to use, but there are several problems with official applets:

Only icons success and loading can be displayed.

The icon cannot be removed.

Maximum duration: 10 seconds

Ii. Custom toast

The most common toast is to the bottom, and the height is relatively small ~~

First look at the effect:

It seems simple and not easy to implement. How to implement it:

1) create a Public toast template file, because toast is required for each page.

<!-- wetoast.wxml --><template name="wetoast"> <view class="wetoast {{reveal ? 'wetoast_show' : ''}}">  <view class="wetoast__mask"></view>  <view class="wetoast__bd {{position}}" animation="{{animationData}}">   <block wx:if="{{title}}">    <view class="wetoast__bd__title {{titleClassName || ''}}">{{title}}</view>   </block>  </view> </view></template>

2) JS has the following usage:

Core code:

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

This code is the core,getCurrentPages().length - 1Indicates that the page of the current page can be obtained.page.setDataBind the data on the current page to toast.

Core code:

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

This code shows a slow animation effect when toast disappears.

Appendix:Click here for the complete demo instance codeDownload from this site.

I hope this article will help you develop small programs.