> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿 구성 요소: 토스트 표시 메시지 프롬프트 상자 해석 및 분석

WeChat 애플릿 구성 요소: 토스트 표시 메시지 프롬프트 상자 해석 및 분석

高洛峰
풀어 주다: 2017-03-31 13:19:28
원래의
3580명이 탐색했습니다.

토스트는 메시지 프롬프트 상자 구성 요소 설명을 표시합니다.

토스트는 사용자가 특정 구성 요소를 클릭할 때 팝업되는 프롬프트 메시지입니다. Toast는 이러한 메시지를 만들고 표시하는 데 도움이 됩니다. 토스트(Toast)는 간단한 메시지 프롬프트 상자입니다. 뷰가 사용자에게 표시되면 애플리케이션에서 부동 소수점으로 나타납니다. 미니 프로그램은 곧 Toast 구성 요소를 포기하므로 ​​여기에 Toast API가 도입됩니다: wx.showToast

토스트 표시 메시지 프롬프트 상자 구성 요소의 샘플 코드는 다음과 같이 실행됩니다.

WeChat 애플릿 구성 요소: 토스트 표시 메시지 프롬프트 상자 해석 및 분석

다음은 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 코드입니다.

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 애플릿 구성 요소: 토스트 표시 메시지 프롬프트 상자 해석 및 분석

위 내용은 WeChat 애플릿 구성 요소: 토스트 표시 메시지 프롬프트 상자 해석 및 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿