ホームページ  >  記事  >  WeChat アプレット  >  WeChat アプレット コンポーネント: トースト表示メッセージ プロンプト ボックスの解釈と分析

WeChat アプレット コンポーネント: トースト表示メッセージ プロンプト ボックスの解釈と分析

高洛峰
高洛峰オリジナル
2017-03-31 13:19:283521ブラウズ

トーストにはメッセージ プロンプト ボックスのコンポーネントの説明が表示されます:

トーストは、ユーザーが特定のコンポーネントをクリックしたときにポップアップするプロンプト メッセージです。トーストは、これらのメッセージの作成と表示に役立ちます。トーストは、単純なメッセージ プロンプト ボックスです。ビューがユーザーに表示されると、アプリケーション内でフロートとして表示されます。ミニ プログラムは Toast コンポーネントを放棄しようとしているので、ここで Toast API を紹介します: wx.showToast

Toast はメッセージ プロンプト ボックス コンポーネントを表示します。サンプル コードの実行効果は次のとおりです。 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>

以下は JS コードです: WeChat アプレット コンポーネント: トースト表示メッセージ プロンプト ボックスの解釈と分析

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

WXSS コードは次のとおりです:

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

以上がWeChat アプレット コンポーネント: トースト表示メッセージ プロンプト ボックスの解釈と分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。