資訊專欄INFORMATION COLUMN
摘要：最近一直在搞小程序，由于剛需一個(gè)拾色器，搜了半天也沒見人做過，就自己動(dòng)手?jǐn)]了一個(gè)，還在不斷地改進(jìn)優(yōu)化中。。。
最近一直在搞小程序，由于剛需一個(gè)拾色器，搜了半天也沒見人做過，就自己動(dòng)手?jǐn)]了一個(gè)，還在不斷地改進(jìn)優(yōu)化中。。。
項(xiàng)目地址https://github.com/KirisakiAr...
查看DEMO 安裝使用 gitgit clone https://github.com/KirisakiAria/we-color-picker.gitnpm
npm install we-color-picker --save
將項(xiàng)目中src目錄下的全部文件拷貝到/components/color-picker中，在使用該組件的頁面對應(yīng)json文件中添加：
"usingComponents": {
"color-picker":"/components/color-picker/color-picker"
}
具體如何引入組件請參考微信小程序官方文檔
截圖示例仿照PS的色相立方體制作而成
WXMLJS
data: {
colorData: {
//基礎(chǔ)色相，即左側(cè)色盤右上頂點(diǎn)的顏色，由右側(cè)的色相條控制
hueData: {
colorStopRed: 255,
colorStopGreen: 0,
colorStopBlue: 0,
},
//選擇點(diǎn)的信息（左側(cè)色盤上的小圓點(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è)色盤觸摸或者切換右側(cè)色相條）
onChangeColor(e) {
//返回的信息在e.detail.colorData中
this.setData({
colorData: e.detail.colorData
})
}
多個(gè)拾色器的情況
WXML
JS
//設(shè)置多個(gè)參數(shù)即可
colorData0: {
//...
},
colorData1: {
//...
},
colorData2: {
//...
},
//More...
onChangeColor(e) {
//這里我使用了dataset來存儲標(biāo)志，用來判斷時(shí)哪個(gè)拾色器發(fā)生變化
const index = e.target.dataset.id
this.setData({
[`colorData${index}`]: e.detail.colorData
})
}
遇到問題?
Issue
wechat: thereshegoes
email: [email protected]
推廣我做的另一個(gè)小程序，專門用來合成沙雕表情的《沙雕表情制作》，大家有興趣可以玩玩看。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100662.html
摘要：拾色器將會分別綁定每個(gè)元素。會回傳兩個(gè)參數(shù)，第一個(gè)就是該拾色器生成時(shí)綁定的第二個(gè)參數(shù)，代表是回傳的顏色值。起初是插件直接改變綁定元素的顏色，但是想到有些拾色器插件是綁定表單，改變表單顏色值，有些是改變綁定元素的顏色。 原生js實(shí)現(xiàn)拾色器插件 前言 插件功能只滿足我司業(yè)務(wù)需求，如果希望有更多功能的，可在下方留言，我盡量擴(kuò)展！如果你有需要或者喜歡的話，可以給我github來個(gè)star ? ...
摘要：說明這篇文章主要介紹的就是一些瀏覽器的小技巧，很簡單，希望對大家有所幫助。顏色的，或十六進(jìn)制表示。單擊其中一個(gè)方塊將顏色更改為該方塊。在當(dāng)前顏色的，和表示之間切換。 說明 這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，希望對大家有所幫助。 這其中的一些小技巧在低版本中是沒有的，所以建議大家用最新版的，目前最新版是62，版本很重要，如果發(fā)現(xiàn)有些技巧不起作用，請先查看瀏...
摘要：說明這篇文章主要介紹的就是一些瀏覽器的小技巧，很簡單，希望對大家有所幫助。顏色的，或十六進(jìn)制表示。單擊其中一個(gè)方塊將顏色更改為該方塊。在當(dāng)前顏色的，和表示之間切換。 說明 這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，希望對大家有所幫助。 這其中的一些小技巧在低版本中是沒有的，所以建議大家用最新版的，目前最新版是62，版本很重要，如果發(fā)現(xiàn)有些技巧不起作用，請先查看瀏...
摘要：說明這篇文章主要介紹的就是一些瀏覽器的小技巧，很簡單，希望對大家有所幫助。顏色的，或十六進(jìn)制表示。單擊其中一個(gè)方塊將顏色更改為該方塊。在當(dāng)前顏色的，和表示之間切換。 說明 這篇文章主要介紹的就是一些chrome瀏覽器的小技巧，很簡單，希望對大家有所幫助。 這其中的一些小技巧在低版本中是沒有的，所以建議大家用最新版的，目前最新版是62，版本很重要，如果發(fā)現(xiàn)有些技巧不起作用，請先查看瀏...
閱讀 3651·2021-11-23 09:51
閱讀 1995·2021-11-16 11:42
閱讀 3244·2021-11-08 13:20
閱讀 1099·2019-08-30 15:55
閱讀 2210·2019-08-30 10:59
閱讀 1242·2019-08-29 14:04
閱讀 1026·2019-08-29 12:41
閱讀 2029·2019-08-26 12:22
