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:
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>
The following is the JS code:
Page({ showToast:function(){ var that=this; wx.showToast({ title: '成功', icon: 'success', duration: 2000, success: that.flySuccess, fail:that.flyFail, complete:that.flyComplete }) }, hideToast:function(){ var that=this; wx.showToast({ title: '加载中', icon: 'loading', duration: 10000, success: that.loadingSuccess, fail:that.loadingFail, complete:that.loadingComplete }); setTimeout(function(){ wx.hideToast() },2000) },
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; }
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!