點(diǎn)擊上方“極客小寨”，選擇“置頂公眾號(hào)”

第一時(shí)間關(guān)注程序猿(媛)身邊的故事

大家好，我是獨(dú)立開(kāi)發(fā)者東東，如今在web項(xiàng)目中不少地方需要用到顏色選擇器，比如設(shè)置某個(gè)元素的背景色、邊框色等等，按照我們交互設(shè)計(jì)的期望-設(shè)色器最好簡(jiǎn)單易用，僅顯示常用的那些色塊給用戶(hù)選擇，另外提供一個(gè)輸入框方便用戶(hù)輸入自定義的色值。

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

今天找了很久終于找到一個(gè)微信小程序的拾色器組件。特意分享出來(lái)供大家一起學(xué)習(xí)使用！

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

安裝與使用

安裝獲取:

git:

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

npm:

npm install we-color-picker --save

將項(xiàng)目中src目錄下的全部文件拷貝到/components/color-picker中，在使用該組件的頁(yè)面對(duì)應(yīng)json文件中添加：

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

單個(gè)拾色器使用效果

1.單個(gè)拾色器的使用情況

wxml

js

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

多個(gè)拾色器使用效果

1.多個(gè)拾色器的使用情況

wxml

js

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

- The End -

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

添加技術(shù)咖微信ID

程序 丨 geekxz??

郵箱 丨 geekxz@aliyun.com

?

往期精彩

使用CSS如何才能實(shí)現(xiàn)精美的圖片的濾鏡效果?

微信小程序?qū)崟r(shí)網(wǎng)絡(luò)接口搜索并高亮關(guān)鍵字

基于canvas的畫(huà)畫(huà)涂鴉

微信小程序自定義底部導(dǎo)航

---

關(guān)于P&P Team的那些事兒

更多分享，請(qǐng)持續(xù)關(guān)注“極客小寨”第一時(shí)間關(guān)注程序猿(媛)身邊的故事

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。