WeChat 애플릿에서 다운로드 진행 표시줄을 구현하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-21 18:34:49

원래의

1652명이 탐색했습니다.

이 글은 주로 위챗 애플릿에서 다운로드 진행률 표시줄을 구현하는 방법을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

APP 다운로드에서 다운로드 진행률 표시줄을 자주 볼 수 있습니다. 이 진행률 표시줄은 사용자와 상호 작용하고 사용자에게 현재 진행 상황을 알리기 위한 것입니다. 그렇지 않으면 사용자는 계속 기다리게 됩니다. 1분 이상 기다리면 충돌이 발생합니다. 오늘은 미니 프로그램에서 다운로드 진행률 표시줄을 만드는 방법을 가르쳐 드리겠습니다.

진행률 표시줄은 진행률 표시줄과 유사한 WeChat 미니 프로그램의 구성 요소입니다. HTML5의

Progress 속성 소개

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

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

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>

로그인 후 복사

여기에서는 다운로드 진행률 표시줄을 만드는 방법뿐만 아니라 진행하는 방법도 알려드립니다. 로딩 라인의 최상위 라인인 웹페이지 로딩 과정 중 바, 어쨌든 원리는 동일하고, 핵심은 여전히 미니 프로그램 자체의 진행을 제어하는 것입니다
active는 진행률 표시줄 애니메이션 표시를 제어하는 데 사용됩니다
선택한 진행률 표시줄의 진행률을 설정하는 백분율
다운로드를 시작하려면 클릭하면 startDown 이벤트가 발생합니다.

2. xxx.js

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

로그인 후 복사

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

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

요약

진행률 표시줄 코더는 위의 두 가지 예만 나열했습니다. 실제로 진행률 표시줄은 급한 구매 판매 남은 진행률 표시줄, 완료 시간 남은 정도 등으로 사용할 수도 있습니다. 독자들에게 작은 숙제를 남겨주세요. 제가 나열한 다른 두 개의 진행률 표시줄 예입니다. 오늘의 진행률 표시줄 설명은 여기까지입니다.

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