安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件

点击上方“极客小寨”，选择“置顶公众号”

第一时间关注程序猿(媛)身边的故事

大家好，我是独立开发者东东，如今在web项目中不少地方需要用到颜色选择器，比如设置某个元素的背景色、边框色等等，按照我们交互设计的期望-设色器最好简单易用，仅显示常用的那些色块给用户选择，另外提供一个输入框方便用户输入自定义的色值。

以前我一直用的那个(eyecon.ro) 功能完整也简易，但是不尽符合上面的要求，于是 google了N下，结果找到现成的jquery拾色器插件很好的支持以下功能：简单易用，仅显示常用的那些色块给用户选择，另外提供一个输入框方便用户输入自定义的色值。

今天找了很久终于找到一个微信小程序的拾色器组件。特意分享出来供大家一起学习使用！

GitHub的：该项目可在/KirisakiAria/we-color-picker上获得。或者直接关注回复关键字拾色器,即可获得源码。

安装与使用

安装获取:

git:

git clone /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@

☟

往期精彩

使用CSS如何才能实现精美的图片的滤镜效果?

微信小程序实时网络接口搜索并高亮关键字

基于canvas的画画涂鸦

微信小程序自定义底部导航

关于P&P Team的那些事儿

更多分享，请持续关注“极客小寨”第一时间关注程序猿(媛)身边的故事