WeChat applet component: interpretation and analysis of toast display message prompt box

高洛峰
Release: 2017-03-31 13:19:28
Original
3547 people have browsed it

Toast displays message prompt box component description:

Toast is a prompt message that pops up when the user clicks on certain components. Toast will help you create and display these messages. Toast is a simple message prompt box. When the view is displayed to the user, it appears as a float in the application. The mini program will soon abandon the Toast component, so the Toast API is introduced here: wx.showToast

The sample code of the toast display message prompt box component runs as follows:

WeChat applet component: interpretation and analysis of toast display message prompt box

The following is the WXML code:

<!--index.下面是WXML代码:-->
<view class="content">
  <text class="showfunc">Toast功能</text>
  <view class="con-button">
    <button class="button-left" bindtap="showToast">展示Toast</button>
    <button class="button-right" bindtap="hideToast">隐藏Toast</button>
  </view>
</view>
Copy after login

The following is the JS code:

Page({
  showToast:function(){
    var that=this;
    wx.showToast({
      title: &#39;成功&#39;,
      icon: &#39;success&#39;,
      duration: 2000,
      success: that.flySuccess,
      fail:that.flyFail,
      complete:that.flyComplete
    })
  },
  hideToast:function(){
    var that=this;
    wx.showToast({
      title: &#39;加载中&#39;,
      icon: &#39;loading&#39;,
      duration: 10000,
      success: that.loadingSuccess,
      fail:that.loadingFail,
      complete:that.loadingComplete
    });
    setTimeout(function(){
      wx.hideToast()
    },2000)
  },
Copy after login

The following is the WXSS code:

/**index.下面是WXSS代码:**/
.con-button{
  display: flex;
  flex-direction: row;
  padding-top: 10%;
}
.showfunc{
  padding-top:10%;
  display: block;
  text-align: center;
  color: green;
}
Copy after login

WeChat applet component: interpretation and analysis of toast display message prompt box

The above is the detailed content of WeChat applet component: interpretation and analysis of toast display message prompt box. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template