WeChat アプレットにダウンロードの進行状況バーを実装する方法-ミニプログラム開発-php.cn

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

小云云

リリース： 2018-05-15 11:00:14

オリジナル

6179 人が閲覧しました

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

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

進捗属性の紹介

Color未選択進行状況の色bar

属性名	機能	パラメータ値
パーセント	進捗率0~100
番組情報	は右側にありますプログレスバーの表示パーセンテージ	true/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>

ログイン後にコピー

ここでは、ダウンロードプログレスバーの作り方だけでなく、その作り方も教えます。 Web ページの読み込みプロセス中の進行状況バー。これが一番上です。読み込み行のその行、原則は同じです。コアは依然としてミニプログラム自身の進行状況の制御です
active は、進行状況の表示を制御するために使用されますバーアニメーション
パーセントで選択したプログレスバーの進捗状況を設定します
開始をクリックするとダウンロード時にstartDownイベントがトリガーされます

2. xxx.js

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

ログイン後にコピー

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

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

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