mini color pickerダウンロード - mini color pickerソースコードのダウンロード

mini color picker

AI ソースコード

1.0.0

ダウンロード

ミニカラーピッカー

アプレットカラーピッカー (カラーピッカー) コンポーネントは、カラーパレットから色を選択し、ユーザー定義のシーンに使用されます。

特性：

既存のソリューションの分析

we-color-pickerはコンポーネントの配置に気を配る必要があり、動作もスムーズではなく、設定も複雑です。その配置により元のページが引き伸ばされ、エクスペリエンスが低下します。スライド距離はピクセル単位（固定）で区別されており、デバイスの解像度を考慮する必要があり、マルチエンドには向きません。
PapaerPenは独自のスライダーコンポーネントを使用し、デバイスの解像度に限定されないスライド選択を実現しています。ただし、3 つの操作が必要であり、色相選択の内部実装は面倒です。3 つのコンポーネント (HSV/HSB) としての色の値には実際には影響しません。

解決

公式スライダーで色相を、可動ビューで彩度と明るさを選択公式の基本コンポーネントなので操作はスムーズです。
スライディングエリアの設定では、実際のノードを取得した後、rpx変換を考慮せず、その割合を使用してカラー値の変化に影響を与えます。
操作プロセスに関しては、携帯電話の操作領域に限定されており、元のページに影響を与えず、重要なポイントを強調表示するポップアップウィンドウを下部から引き上げるポップオーバーは使用できません。
操作プレビューでは、リアルタイムプレビューではどうしてもポップアップウィンドウマスクが利用できないため、色相スライダーの色を利用してプレビューを実現しています。同時にiphone-xのセキュリティエリアの問題も考慮されます。

使用効果

スクリーンショット

サンプル

開発者ツールで効果をプレビュー => コードスニペット ID: YOF4QUmO7NmW

インストールして使用する

1. コンポーネントを取得する

git

不安定な可能性がありますが、最新の機能アップデートが含まれています

git clone https://github.com/MakerGYT/mini-color-picker.git

プロジェクト内のコンポーネント/カラーピッカーフォルダーをコンポーネントパスにコピーします。

npm

安定させる

npm install mini-color-picker --save

npm パッケージを使用するには、WeChat アプレットの公式ドキュメントを参照してください。

2. コンポーネントの紹介

このコンポーネントを使用して、ページに対応する json ファイルを追加します。

{
  "usingComponents" : {
    "color-picker" : " /components/color-picker/color-picker " 
  }
}

npm を使用している場合は、開発者ツールのメニューバーをクリックします。 [ツール] --> [npm のビルド] オプションにチェックを入れます (デモはビルド後の結果です)。

{
  "usingComponents" : {
    "color-picker" : " mini-color-picker/color-picker " 
  }
}

3. コンポーネントを使用する

参考文献・ページ

 <!-- index.wxml -->
< view style =" background:{{rgb}};width:100px;height:24px; " bindtap =" toPick " > </ view >
< color-picker bindchangeColor =" pickColor " initColor =" {{rgb}} " show =" {{pick}} " />

 Page ( {
  data : {
    rgb : 'rgb(0,154,97)' , //初始值
    pick : false
  } ,
  // 显示取色器
  toPick : function ( ) {
    this . setData ( {
      pick : true
    } )
  } ,
  //取色结果回调
  pickColor ( e ) {
    let rgb = e . detail . color ;
  } ,
} )

物件一覧

財産	タイプ	デフォルト値	必須	説明する
見せる	ブール値	間違い	はい	表示するかどうか
初期色	弦	RGB(255,0,0)	はい	初期色、RGB表現
マスク	ブール値	真実	いいえ	背景マスクを表示するかどうか
マスク開閉可能	ブール値	真実	いいえ	背景マスクをクリックしてオフにできますか?
バインド変更色	イベントハンドラ		いいえ	色の選択後のコールバック、event.detail = {color}
バインドクローズ	イベントハンドラ		いいえ	背景マスクをクリックしてカラーピッカーをオフにした後にトリガーされるイベント

開発する

知らせ：

現在、双方向のバインディングはありません。つまり、色の値は初期値を取得した後にユーザーによって選択され、外部入力によって変更されるべきではありません（その場合、色の選択の意味が失われます）。
タッチプロセス中にスライダーのカラー値をリアルタイムでプレビューし、頻繁な setData によるブロックを回避するためにタッチを停止した後にカラー値をページに渡すことができます。
コンポーネントとの外部通信に使用されるデータ形式は rgb です。実際のシナリオでコードの冗長性を引き起こす可能性のある複数のデータ形式の導入を避けるために、開発者はオンデマンドで変換し、パブリックアカウント「MakerGYT」で次の対応するコンテンツに返信できます。 " 参照関数コードを取得するには: