집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿에서 맞춤형 토스트 구현 방법에 대한 자세한 설명

WeChat 애플릿에서 맞춤형 토스트 구현 방법에 대한 자세한 설명

小云云원래의: 2017-12-07 15:53:112919검색

WeChat 미니 프로그램에 대한 많은 튜토리얼을 공유한 적이 있습니다. 이번 글에서는 주로 WeChat 미니 프로그램의 맞춤형 토스트 구현 방법을 소개하고, WeChat 미니 프로그램과 함께 제공되는 토스트의 사용법을 간략하게 설명하며, 위챗 미니 프로그램의 정의와 사용법을 분석합니다. 예시 형태의 맞춤형 토스트 방법은 도움이 필요한 친구들이 참고할 수 있습니다.

1. WeChat의 공식 기본 토스트

토스트는 거의 모든 앱에 이러한 특수 효과가 있습니다. 먼저 미니 프로그램과 함께 제공되는 토스트 효과를 살펴보세요. ~~

WeChat에는 토스트 효과가 제공됩니다.

js 파일:

wx.showToast({
 title: &#39;成功&#39;,
 icon: &#39;success&#39;,
 duration: 2000
})

사용법은 매우 간단하지만 공식 미니 프로그램에는 몇 가지 문제가 있습니다.

성공 아이콘 두 개만 표시할 수 있습니다.

그리고 아이콘은 제거할 수 없습니다

최대 지속 시간은 10초입니다

2. 맞춤 토스트

가장 일반적인 토스트는 아래쪽 방향이고 높이는 상대적으로 작습니다~~

먼저 효과를 살펴보세요.

간단해 보이지만 구현이 쉽지 않습니다. 구현 방법:

1) 모든 페이지에서 toast를 사용해야 하므로 공개 토스트 템플릿 파일을 만듭니다

<!-- wetoast.wxml -->
<template name="wetoast">
 <view class="wetoast {{reveal ? &#39;wetoast_show&#39; : &#39;&#39;}}">
  <view class="wetoast__mask"></view>
  <view class="wetoast__bd {{position}}" animation="{{animationData}}">
   <block wx:if="{{title}}">
    <view class="wetoast__bd__title {{titleClassName || &#39;&#39;}}">{{title}}</view>
   </block>
  </view>
 </view>
</template>

2) JS에서는 주로 다음과 같은 사용법을 사용합니다

핵심 코드:

let pages = getCurrentPages();
let curPage = pages[pages.length - 1];

이 코드가 핵심이며,getCurrentPages().length - 1 表示可以获得当前页面的page，只有获得了page，才能通过page.setData현재 페이지의 데이터를 토스트에 바인딩합니다.

핵심 코드:

let animation = wx.createAnimation();
animation.opacity(1).step();

이 코드는 토스트가 사라질 때 느린 애니메이션 효과를 줍니다.

WeChat 애플릿에서 맞춤형 토스트 구현 방법에 대한 자세한 설명

관련 기사