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

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

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

進捗属性の紹介

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

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,
 })
 },

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

関連する推奨事項:

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