mp progress
支持在wepy中是用api方式
小さなプログラムに円形のプログレスバーを実装することに重点を置いたツール
現在、ミニ プログラムには多くのサードパーティ UI コンポーネントがあり、基本的にはコンポーネントの形式で導入および使用されます。ただし、プロジェクトのスタイルがサードパーティに近い場合は、これらのサードパーティ コンポーネント ライブラリの完全なセットの方が便利です。サードパーティ UI ライブラリの特定のコンポーネントのみを使用する場合その場合、非常に大規模なライブラリをインストールするのは合理的ではありません。
mp-progressのターゲット ファイル サイズは 7KB 未満です。便利な js 呼び出しメソッドとネイティブの Canvas タグ記述メソッドは、高度な制御を維持したいプロジェクトに非常に適しています。
$ npm install mp-progress --save
ドキュメントの要件に従って、基本ライブラリのバージョン 2.7.0 以降がサポートされています。最も効果的なのは、最新の基本ライブラリを使用することです。
WeChat のネイティブ アプレットを使用して npm パッケージを導入するには、追加の構成が必要です。詳細については、https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13 を参照してください。
対応するページでコンポーネントを導入し、データを初期化し、wxml でコンポーネントを使用します
コンポーネントの実装が異なるため、このメソッドは wepy には適用できません。
{
"navigationBarTitleText": "首页",
"usingComponents": {
"mpProgress": "mp-progress/dist/component/mp-progress"
}
}
...
// 参数使用方式相同，canvasSize默认是400*400
data = {
config: {
canvasSize: {
width: 400,
height: 400
},
percent: 100,
barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
needDot: true,
dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
},
percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>
このメソッドは、双方向バインディング データの原則に従い、ページが変更されると、mp-progress がビューを自動的に更新します。
このメソッドは wepy に適していますが、onReady コールバック関数で初期化する必要があります。
渡される単位はrpxです。つまり、キャンバスの幅が 400rpx の場合、400 が渡され、実際のサイズは後で自動的に計算されます。
import MpProgress from 'mp-progress';
...
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
target: this,
canvasId: 'progress',
canvasSize: {width: 400, height: 400},
barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});
// 开始绘制进度，60代表60%
mprogress.draw(60);
...
<canvas class="canvas" type="2d" id="progress"></canvas>
| 効果 | 解析する |
|---|---|
 | 通常モード (デフォルト) |
 | パーセンテージ モード (必要に応じてパーセンテージを渡すだけです。パラメータの説明を参照してください) |
| パラメータ名 | データ型 | 必須パラメータ | 解析する | リスト |
|---|---|---|---|---|
| ターゲット | 物体 | はい | ページのコンテキスト | これ |
| キャンバスID | 弦 | はい | ページキャンバスのID | 進捗 |
| キャンバスサイズ | 物体 | はい | キャンバスのサイズ。対応する単位は rpx です。数値を渡すだけです。 | {幅: 200、高さ: 300} |
| パーセント | 番号 | いいえ | デフォルトでは、円は 360 度に基づいて計算され、80% が渡されると、キャンバス サイズに基づいて最大の半円弧が自動的に描画されます。有効な値は 50% から 100% です。 | 100 |
| バースタイル | 配列 | はい | 円弧の進行状況スタイルは、配列要素の位置順序に従ってレンダリングされ、最初の要素構成は円弧全体を覆う背景色であり、2 番目の要素構成は進行状況のパーセンテージに従って円弧をレンダリングします。 fillStyle には通常の色またはグラデーション カラーを使用できます。グラデーション カラーを使用するには、各ポイントの位置と色の情報を配列形式で渡す必要があります。 | [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674' }]}] |
| ニードドット | ブール値 | いいえ | 進行状況を表示する必要がありますか? | 間違い |
| ドットスタイル | 配列 | いいえ | 進行状況ポイントのスタイル設定では、最大 2 つのスタイルのオーバーレイをサポートしています。進行状況ポイントを明確に表示するために、デフォルトで最初のポイントに影が追加されます。最初のプログレス ポイントの直径がプログレス バーよりも大きい場合、プログレス ポイントがキャンバスに完全に表示されるようにするには、描画されたプログレス バーの円を対応する差分だけ縮小する必要があります。影はオプションの構成です。そして、shadow の値は(0, 0, r/2, shadow)です。 | dotStyle: [{r: 24、fillStyle: '#fff'、shadow: 'rgba(0,0,0,.15)'}、{r: 10、fillStyle: '#56B37F'}] |
進行状況バーがページ上で複数回更新される可能性があることを考慮して、コンポーネントがインスタンス化された後、 drawメソッドを手動で呼び出して画像を描画する必要があります。
| パラメータ名 | データ型 | 必須パラメータ | 解析する |
|---|---|---|---|
| 割合 | 番号 | はい | たとえば、円弧のパーセンテージに 60 を渡すと、円弧の残りの 60% のみが反時計回りにレンダリングされます。 |
円弧の終点スタイルを設定する方法
lineCapパラメータは、 barStyleの任意のパラメータ項目に追加できます。例: barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}] lineCap有効な値については、ドキュメントを参照してください。
SDK バージョン 2.7.0 以降で実行する必要があります
このコンポーネントは WeChat の最新の同一レイヤー レンダリング メソッドを採用しており、SDK バージョンが 2.7.0 以上である必要があります。
ドットスタイル
dotStyle に影が含まれている場合、円のすべての領域に影が完全に表示されるようにするために、進行状況バーの半径が自動的に小さくなります。
進捗アニメーション
現在、アニメーションは barStyle の最後の要素の定義でのみ機能し、各フレームのアニメーションはアニメーション全体の 2% です。
テキスト表示効果
実装コードについては、以下を参照してください。
<view class="garage-status">
<canvas class="canvas" type="2d" id="progress"></canvas>
<view class="status-ctn">
<view class="status-count">127/127</view>
<view class="desc-text">适用车位剩余</view>
</view>
</view>
問題のフィードバック
