WeChat 미니 프로그램에서 맞춤형 토스트를 구현하는 방법

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

이 기사의 예에서는 WeChat 애플릿에서 사용자 정의 토스트를 구현하는 방법을 설명합니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1. WeChat의 공식 기본 토스트

토스트는 거의 모든 앱에 이러한 특수 효과가 있습니다. 미니 프로그램에 딸려오는 효과 바로 죽고 싶었어요~~

WeChat만의 토스트 효과:

js 파일:

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

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

can 성공만 표시됩니다. 아이콘 두 개를 로드하면

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

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

2. 맞춤 토스트

가장 일반적인 토스트는 아래쪽을 향한 것이며 높이는 상대적으로 작습니다. ~~

효과 먼저 살펴보기:

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

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

<!-- 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();

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 글:

vue+swiper에서 사이드 슬라이딩 메뉴 효과 구현하는 방법

Angular를 사용하여 삼각형 화살표 라벨링 기능을 구현하는 방법

Angular를 사용하여 타이머 기능을 구현하는 방법

JS 지연 숨김 기능을 통해 구현하는 방법

위 내용은 WeChat 미니 프로그램에서 맞춤형 토스트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!