Composant d'applet WeChat : interprétation et analyse de la boîte d'invite de message d'affichage de toast-Développement de mini-programmes-php.cn

Composant d'applet WeChat : interprétation et analyse de la boîte d'invite de message d'affichage de toast

高洛峰

Libérer： 2017-03-31 13:19:28

original

3560 Les gens l'ont consulté

Toast affiche la description du composant de la boîte d'invite de message :

Toast est un message d'invite qui apparaît lorsque l'utilisateur clique sur certains composants. Toast vous aidera à créer et afficher ces messages. Toast est une simple boîte de message. Lorsque la vue est affichée à l'utilisateur, elle apparaît sous forme de flotteur dans l'application. Le mini-programme abandonnera bientôt le composant Toast, l'API Toast est donc présentée ici : wx.showToast

L'exemple de code du composant de boîte d'invite de message d'affichage toast s'exécute comme suit :

Composant dapplet WeChat : interprétation et analyse de la boîte dinvite de message daffichage de toast

Ce qui suit est le code WXML :

<!--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>

Copier après la connexion

Ce qui suit est le code JS :

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)
  },

Copier après la connexion

Ce qui suit est le code WXSS :

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

Copier après la connexion

Composant dapplet WeChat : interprétation et analyse de la boîte dinvite de message daffichage de toast