Explanation of custom toast instances for WeChat applets

This article mainly introduces how to customize toast in the practice of small programs, which has some reference value, interested friends can refer to this article to introduce in detail how to customize toast in the practice of small programs, which has a certain reference value, for more information, see

The toast api wx. showToast () is good and convenient to use. However, the toast will display the icon and cannot be removed.

Suppose that when we finish executing the business, toast is acceptable when the execution is successful, for example:

  
   
  
   
Button
   
   
  
  
  
   
    
   
    
{ToastText }}
     
   
 

Wxss:

Page {background: # fff;}/* Button */. btn {font-size: 28rpx; padding: 15rpx 30rpx; width: 100rpx; margin: 20rpx; text-align: center; border-radius: 10rpx; border: 1px solid #000;}/* mask */. toast_mask {opacity: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 888 ;} /* toast */. toast_content_box {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: fixed; z-index: 999 ;}. toast_content {width: 50%; padding: 20rpx; background: rgba (0, 0, 0, 0.5); border-radius: 20rpx ;}. toast_content_text {height: 100%; width: 100%; color: # fff; font-size: 28rpx; text-align: center ;}

Js:

Page ({data: {// toast does not display isShowToast: false by default}, showToast: function () {var _ this = this; // toast time _ this. data. count = parseInt (_ this. data. count )? ParseInt (_ this. data. count): 3000; // Display toast _ this. setData ({isShowToast: true,}); // The timer closes setTimeout (function () {_ this. setData ({isShowToast: false}) ;}, _ this. data. count) ;},/* click the button */clickBtn: function () {console. log ("you clicked the button") // Set the toast time, toast content this. setData ({count: 1500, toastText: 'Michael's Toast '}); this. showToast ();}})

The above is a detailed description of the customized toast instance for applets. For more information, see other related articles in the first PHP community!