近来一直在搞小顺序，因为刚需一个拾色器，搜了半天也没见人做过，就本身着手撸了一个，还在不断地革新优化中。。。

项目地点

https://github.com/KirisakiAr…

检察DEMO

装置运用

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"
}

详细怎样引入组件请参考微信小顺序官方文档

截图示例

模仿PS的色相立方体制造而成

WXML

<color-picker class="color-picker" colorData="{{colorData}}" rpxRatio="{{rpxRatio}}" bindchangecolor="onChangeColor"></color-picker>

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
    })
}

多个拾色器的状况

WXML

<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...-->

JS

//设置多个参数即可
colorData0: {
    //...
},
colorData1: {
    //...
},
colorData2: {
    //...
},
//More...

onChangeColor(e) {
    //这里我运用了dataset来存储标志，用来推断时哪一个拾色器发生变化
    const index = e.target.dataset.id
    this.setData({
        [`colorData${index}`]: e.detail.colorData
    })
}

遇到问题?

Issue

wechat: thereshegoes

email: xiaoli350791904@hotmail.com

推行

我做的另一个小顺序，特地用来合成沙雕脸色的《沙雕脸色制造》，人人有兴致能够玩玩看。