WeChat applet customization of TOAST pop-up effects

There are only two, Success and Loading in the WeChat applet. Sometimes the user wants to add a reminder icon when the user enters the error, or uses the image in wx.showtoast to add a picture to the purpose of using the custom icon; but if the icon is a font, or the reminder is a long pin (small program) The content of the reminder can only set up to 7 words, more will be hidden), then only the custom toast pop-up window;

Step: New WXML file is used to install templates, it is convenient Use, such as

微信小程序自定义toast弹窗效果的实现代码

   // Name is equivalent to the template Identify, when the reference is a reference to which one  // wx: if is conditional rendering, use this is to determine whether it is displayed or hidden toast    // used Ali font icon, According to the incoming Class value changed the displayed icon  {TXT}} // Need to display a reminder      
[ Step 2: Define TOAST style

 .toast-out {position: fixed; Top: 0; Left: 0; z-index: 9999; width: 100%; Height: 100%; Display: flex; // use flex layout in the applet, very convenient Justify-Content: center; align-items: center;}. Toast-out .toast-in {min-width : 100px; Background: RGBA (0, 0,0, 0.7); Padding: 6px; Text-align: center; color: white; border-radius: 8px;}. Toast-out .toast-in span {font-size: 30px;}. Toast-out .toast- In. TOAST-TXT {FONT-SIZE: 14PX;}   Tertial steps: That TOAST Template page in need to pop up page Import: 

  Note: .. refers to returning the last layer of directory is the parent directory, two .. ie return Go to the parent directory of the parent directory. / Is the root directory, absolute path. Here, the absolute path   can then be referenced in this page 

   Fourth step: in the introduction of the pop-up page JS   In the Page's DATA, default ISSHOW: false // default hidden, but I am a bit strange, don't define this Attributes, comment out, can hide and display normally. 
and then define a function of displaying pop-up window

TOastShow: function (str, icon) {var _this = this; _this.setdata ({ISSHOW: True, TXT: STR, ICONCLASS: ICON}; setTimeout (function () {// TOAST disappears _this.setdata ({Isshow: false});}, 1500);}

Then call the event in the event that requires the TOAST pop-up display, such as:
   
log_btn: function () {var name = this.data.username; if (name == “) {this.toastshow (‘login name can’t be empty”, “icon-suo” (}}
Results:

The icon is free. . .
  Or writing the JS of the pop-up window into the app ({}), then you need to get it directly getApp (). Toastshow () is OK. For example:  
APP ({Toastshow: Function (That, Str, Icon) {That.SetData ({ISSHOW: TRUE, TXT: STR, ICONCLASS: ICON}); Settimeout ({ISSHOW: FALSE});}, 1500);},}

微信小程序自定义toast弹窗效果的实现代码 The page is then introduced into the pop-up:

VAR App = getApp ();

In this page, the function is called in the function:

  his_clear : function () {app.toastshow (this, "Clear Success", "icon-Correct");},  

Connection: Small procedure Using Ali font icon

Summary: HTML is different, WX: if condition rendering can achieve hidden and display WX: if = “false “It is hidden, True is displayed. It is convenient to use the Display: Flex elastic box layout, such as the level of the population above and vertical, as long as two properties are set. No need to set another bunch of other piles like previously, the previous level of time

add:

Justify-content’s optional properties are: Flex-Start (all left) , Flex-end (all right), center, space-between, space-around, initial (inherited from the parent element)
 can view the effect: http://www.runoob. COM / TRY / Playit.php? f = playcss_justify-content & preval = flex-start   Optional properties of Align-Items are: Stretch, Center, Flex-Start, Flex-End, Baseline (in the same baseline Initial (set as default), inherit (inherited from the parent element) 
can view the effect: http://www.runoob.com/Try/playit.php? F = playcss_align-items & preval = Baseline

The above is the custom TOAST pop-up window for the WeChat applet to you, I hope to help everyone. If everyone has any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment