发表日期:2019-10 文章编辑:小灯 浏览次数:4054
最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中。。。
https://github.com/KirisakiAr...
git clone https://github.com/KirisakiAria/we-color-picker.git
npm install we-color-picker --save
将项目中src目录下的全部文件拷贝到/components/color-picker中,在使用该组件的页面对应json文件中添加:
"usingComponents": {
"color-picker":"/components/color-picker/color-picker"
}
具体如何引入组件请参考微信小程序官方文档
仿照PS的色相立方体制作而成
<color-picker class="color-picker" colorData="{{colorData}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
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
})
}
<color-picker data-id="0" class="color-picker" colorData="{{colorData0}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<color-picker data-id="1" class="color-picker" colorData="{{colorData1}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<color-picker data-id="2" class="color-picker" colorData="{{colorData2}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>
<!--More...-->
//设置多个参数即可
colorData0: {
//...
},
colorData1: {
//...
},
colorData2: {
//...
},
//More...
onChangeColor(e) {
//这里我使用了dataset来存储标志,用来判断时哪个拾色器发生变化
const index = e.target.dataset.id
this.setData({
[`colorData${index}`]: e.detail.colorData
})
}
wechat: thereshegoes
email: xiaoli350791904@hotmail.com
我做的另一个小程序,专门用来合成沙雕表情的《沙雕表情制作》,大家有兴趣可以玩玩看。
日期:2019-11 浏览次数:4785
日期:2019-11 浏览次数:11207
日期:2019-11 浏览次数:3647
日期:2019-11 浏览次数:4558
日期:2019-11 浏览次数:4658
日期:2019-11 浏览次数:6326
日期:2019-11 浏览次数:4578
日期:2019-11 浏览次数:15027
日期:2019-11 浏览次数:3926
日期:2019-11 浏览次数:5695
日期:2019-11 浏览次数:4531
日期:2019-11 浏览次数:3864
日期:2019-11 浏览次数:9624
日期:2019-11 浏览次数:7536
日期:2019-11 浏览次数:4228
日期:2019-11 浏览次数:3620
日期:2019-11 浏览次数:8162
日期:2019-11 浏览次数:3874
日期:2019-11 浏览次数:4046
日期:2019-11 浏览次数:4119
日期:2019-11 浏览次数:3678
日期:2019-11 浏览次数:4265
日期:2019-11 浏览次数:9450
日期:2019-11 浏览次数:4464
日期:2019-11 浏览次数:4458
日期:2019-11 浏览次数:4044
日期:2019-11 浏览次数:11361
日期:2019-11 浏览次数:6657
日期:2019-11 浏览次数:6917
日期:2019-11 浏览次数:4270
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.