WeChat アプレットにダウンロードの進行状況バーを実装する方法

この記事では主に、WeChat アプレットにダウンロードの進行状況バーを実装する方法を紹介します。編集者はそれが非常に優れていると考えたので、今すぐ共有して参考にします。エディターをフォローして見てみましょう

アプリのダウンロードでは、ダウンロードの進行状況バーがよく見られます。この進行状況バーは、ユーザーと対話し、現在の進行状況をユーザーに知らせるためのものです。そうしないと、ユーザーは待たされてしまいます。 1 分以上待つとクラッシュします。今日は、ミニ プログラムでダウンロードの進行状況バーを作成する方法を説明します

進行状況バーは、進行状況バーと同様に、WeChat ミニ プログラムのコンポーネントです。 HTML5の。

進捗属性の紹介

属性名	機能	パラメータ値
パーセント	進捗率0~100
show-info	の右側に表示されますプログレスバーのパーセンテージ	tru​​e/false デフォルト false
active	プログレスバーの左から右へのアニメーション	true/false デフォルト false
ストローク幅	プログレスバーの線の幅、単位 px	Default 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>

1. ここでは、ダウンロードプログレスバーの作成方法だけでなく、進捗状況を確認する方法も説明します。 Web ページの読み込みプロセス中のバー。これは読み込み行の最上位行です。原理はいずれにせよ同じです。コアはやはりミニ プログラム自身の進行状況の制御です

2. active は、進行状況バー アニメーションの表示を制御するために使用されます

3. 選択したプログレスバーの進行状況を設定するパーセント

4. クリックしてダウンロードを開始すると、startDownイベントをトリガーします

2. xxx.js

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

jsのコードは比較的単純です。データでは、ダウンロードを開始するかどうかを制御し、パーセントはダウンロードの進行状況バーを設定します

startDown は、ダウンロード開始のロジックを処理し、ダウンロードの進行状況バーを更新し、ダウンロード アニメーション効果の実行を開始します

概要

進行状況バーコーダーは上記 2 つの例を列挙しましたが、実際には、プログレス バーは、急ぎの購入の残りのプログレス バー、完了時間の残りの程度などとしても使用できます。読者にちょっとした宿題を残してください。リストした他の 2 つのプログレス バーの例 さて、今日のプログレス バーの説明はこれで終わりです。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptでの疑似配列の使用法について(詳細なチュートリアル)

JSを使用してクライアントタイプを決定する方法

webpackを使用してサードパーティライブラリを抽出する方法

JavaScriptモジュールの最適化

webpack+expressを使用したマルチページサイト開発の実装方法

Webpackフレームワーク（マスターコアテクノロジー）

以上がWeChat アプレットにダウンロードの進行状況バーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。