點擊上方“極客小寨”，選擇“置頂公眾號”

第一時間關注程序猿(媛)身邊的故事

大家好，我是獨立開發者東東，如今在web項目中不少地方需要用到顏色選擇器，比如設置某個元素的背景色、邊框色等等，按照我們交互設計的期望-設色器最好簡單易用，僅顯示常用的那些色塊給用戶選擇，另外提供一個輸入框方便用戶輸入自定義的色值。

以前我一直用的那個(eyecon.ro) 功能完整也簡易，但是不盡符合上面的要求，于是 google了N下，結果找到現成的jquery拾色器插件很好的支持以下功能：簡單易用，僅顯示常用的那些色塊給用戶選擇，另外提供一個輸入框方便用戶輸入自定義的色值。

今天找了很久終于找到一個微信小程序的拾色器組件。特意分享出來供大家一起學習使用！

GitHub的：該項目可在https://github.com/KirisakiAria/we-color-picker上獲得。或者直接關注回復關鍵字拾色器,即可獲得源碼。

安裝與使用

安裝獲取:

git:

git clone https://github.com/KirisakiAria/we-color-picker.git

npm:

npm install we-color-picker --save

將項目中src目錄下的全部文件拷貝到/components/color-picker中，在使用該組件的頁面對應json文件中添加：

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

單個拾色器使用效果

1.單個拾色器的使用情況

wxml

js

data: {
??? colorData: {
??????? //基礎色相，即左側色盤右上頂點的顏色，由右側的色相條控制
??????? hueData: {
??????????? colorStopRed: 255,
??????????? colorStopGreen: 0,
??????????? colorStopBlue: 0,
??????? },
??????? //選擇點的信息(左側色盤上的小圓點，即你選擇的顏色)
??????? pickerData: {
??????????? x: 0, //選擇點x軸偏移量
??????????? y: 480, //選擇點y軸偏移量
??????????? red: 0,
??????????? green: 0,
??????????? blue: 0,
??????????? hex: '#000000'
??????? },
??????? //色相控制條的位置
??????? barY: 0
??? },
??? rpxRatio: 1 //此值為你的屏幕CSS像素寬度/750，單位rpx實際像素
},
onLoad() {
??? //設置rpxRatio
??? wx.getSystemInfo({
??????? success(res) {
??????????? _this.setData({
??????????????? rpxRatio: res.screenWidth / 750
??????????? })
??????? }
??? })
},
//選擇改色時觸發(在左側色盤觸摸或者切換右側色相條)
onChangeColor(e) {
??? //返回的信息在e.detail.colorData中
??? this.setData({
????? colorData: e.detail.colorData
??? })
}

多個拾色器使用效果

1.多個拾色器的使用情況

wxml

js

//設置多個參數即可
colorData0: {
??? //...
},
colorData1: {
??? //...
},
colorData2: {
??? //...
},
//More...
onChangeColor(e) {
??? //這里我使用了dataset來存儲標志，用來判斷時哪個拾色器發生變化
??? const index = e.target.dataset.id
??? this.setData({
??????? [`colorData${index}`]: e.detail.colorData
??? })
}

- The End -

「若你有原創文章想與大家分享，歡迎投稿」

添加技術咖微信ID

程序 丨 geekxz??

郵箱 丨 geekxz@aliyun.com

?

往期精彩

使用CSS如何才能實現精美的圖片的濾鏡效果?

微信小程序實時網絡接口搜索并高亮關鍵字

基于canvas的畫畫涂鴉

微信小程序自定義底部導航

---

關于P&P Team的那些事兒

更多分享，請持續關注“極客小寨”第一時間關注程序猿(媛)身邊的故事

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。