WeChat 애플릿에서 다운로드 진행 표시줄을 구현하는 방법

APP 다운로드에서 다운로드 진행률 표시줄을 자주 볼 수 있습니다. 이 진행률 표시줄은 사용자와 상호작용하고 사용자에게 현재 진행 상황을 알리기 위한 것입니다. 그렇지 않으면 사용자가 1분 이상 기다리게 됩니다. 오늘은 미니 프로그램에서 다운로드 진행률 표시줄을 만드는 방법을 알려드리겠습니다. 이번 글에서는 주로 WeChat 미니 프로그램에서 다운로드 진행률 표시줄을 구현하는 방법을 소개하겠습니다.

진행률 표시줄은 HTML5 진행률 표시줄 진행률과 유사한 WeChat 애플릿의 구성 요소입니다.

Progress 속성 소개

속성 이름	Function	매개변수 값
percent	진행률 0~100
show-info	는 오른쪽에 있습니다 진행률 표시줄 표시 백분율	true/false 기본값 false
active	진행률 표시줄이 왼쪽에서 오른쪽으로 애니메이션	true/false 기본 false
스트로크 너비	진행률 표시줄의 너비 라인, 단위 px	기본값 6px
color	진행률 표시줄 색상	#09BB07
activeColor	선택한 진행률 표시줄 색상
backgroundColor	선택되지 않음 진행 색상 bar

다운로드 진행률 표시줄 제작

1. Wxml 뷰 제작

<progress percent="100" active=&#39;true&#39; stroke-width="4" />
<view class=&#39;title-line&#39;>
 progress</view>

<view class=&#39;column&#39;>
 <button class=&#39;button&#39; type=&#39;primary&#39; size=&#39;mini&#39; bindtap=&#39;startDown&#39;>开始下载</button>

 <text class="title">下载进度：</text>

 <progress percent="{{percent}}" show-info active=&#39;{{isDown}}&#39; stroke-width="14" />
</view>

1. 여기에서는 다운로드 진행률 표시줄을 만드는 방법뿐만 아니라 만드는 방법도 알려드립니다. 웹 페이지 로딩 과정 중 상단에 있는 진행률 표시줄 로딩 라인의 원리는 어쨌든 동일하며 핵심은 여전히 ​​미니 프로그램 자체의 진행률을 제어합니다

2. active는 진행률 표시를 제어하는 ​​데 사용됩니다. 막대 애니메이션

3. 선택한 진행률 표시줄의 진행률을 설정하는 백분율

4. 시작을 클릭하면 다운로드 시 startDown 이벤트가 발생합니다

2. xxx.js

Page({
 data: {
 isDown: false,
 percent: 0,
},
startDown: function (e) {
 this.setData({
  isDown: true,
  percent: 100,
 })
 },

js의 코드는 다음과 같습니다. 비교적 간단합니다. 데이터의 isDown은 다운로드 시작 여부를 제어하고, 퍼센트는 다운로드 진행률 표시줄을 설정합니다.

startDown은 다운로드 시작 논리를 처리하고, 다운로드 진행률 표시줄을 업데이트하고, 다운로드 애니메이션 효과 실행을 시작합니다.

요약

코더는 위의 두 가지 예를 방금 나열했는데 실제로 진행률 표시줄은 급하게 구매 판매 남은 진행률 표시줄로도 사용할 수 있으며 완료 시간 등도 있습니다.

관련 추천:

WeChat 애플릿은 버튼을 클릭하여 글꼴 색상을 변경하는 기능을 구현합니다.

WeChat 애플릿이 이미지 확대 미리보기 기능을 구현하는 방법

비디오, 음악 및 WeChat 애플릿의 사진 구성 요소

위 내용은 WeChat 애플릿에서 다운로드 진행 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!