资讯专栏INFORMATION COLUMN

we-color-picker 微信小程序拾色器(颜色选择器)组件

tainzhi / 2726人阅读

摘要:最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中。。。

最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中。。。

项目地址

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



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

推广

我做的另一个小程序,专门用来合成沙雕表情的《沙雕表情制作》,大家有兴趣可以玩玩看。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100662.html

相关文章

  • 原生js实现插件

    摘要:拾色器将会分别绑定每个元素。会回传两个参数,第一个就是该拾色器生成时绑定的第二个参数,代表是回传的颜色值。起初是插件直接改变绑定元素的颜色,但是想到有些拾色器插件是绑定表单,改变表单颜色值,有些是改变绑定元素的颜色。 原生js实现拾色器插件 前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? ...

    codeGoogle 评论0 收藏0
  • 简单说 chrome浏览 必知必会的小技巧

    摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...

    XanaHopper 评论0 收藏0
  • 简单说 chrome浏览 必知必会的小技巧

    摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...

    imtianx 评论0 收藏0
  • 简单说 chrome浏览 必知必会的小技巧

    摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...

    Travis 评论0 收藏0

发表评论

0条评论

tainzhi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<