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

アプリのダウンロードでは、ダウンロードの進行状況バーがよく表示されます。この進行状況バーは、ユーザーと対話し、現在の進行状況をユーザーに通知するためのものです。そうしないと、ユーザーが 1 分以上待たされることになります。今日は、ミニ プログラムでダウンロード プログレス バーを作成する方法を説明します。この記事では主に WeChat ミニ プログラムでダウンロード プログレス バーを実装する方法を紹介します。

進行状況バーは、HTML5 の進行状況バーの進行状況と同様に、WeChat アプレットのコンポーネントです。

進捗属性の紹介

Color未選択 進行状況の色bar

属性名	機能	パラメータ値
パーセント	進捗率0~100
番組情報	は右側にありますプログレスバーの表示パーセンテージ	tru​​e/false デフォルト false
active	プログレスバーの左から右へのアニメーション	true/false デフォルト false
ストローク幅	プログレスバーの幅ライン、単位 px	デフォルト 6px
color	プログレスバーの色	#09BB07
activeColor	選択されたプログレスバーの色

ダウンロードプログレスバーの制作

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のコードはデータの isDown はダウンロードを開始するかどうかを制御し、パーセントはダウンロードの進行状況バーを設定します

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

プログレス バーには多くの用途があります。プログラマーは上記の 2 つの例を列挙しました。実際、プログレス バーは、急遽購入した売上の残りの進捗バーや、完了した時間の残りなどとしても使用できます。

関連する推奨事項:

WeChatアプレットは、ボタンをクリックしてフォントの色を変更する機能を実装します

WeChatアプレットが画像拡大プレビュー機能を実装する方法

ビデオ、音楽、およびビデオの詳細な説明WeChat アプレットの画像コンポーネント

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