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 - 1
Indicates that the page of the current page can be obtained.page.setData
Bind 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.