摘要:最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中。。。
最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中。。。
项目地址https://github.com/KirisakiAr...
查看DEMO 安装使用 gitgit clone https://github.com/KirisakiAria/we-color-picker.gitnpm
npm install we-color-picker --save
将项目中src目录下的全部文件拷贝到/components/color-picker中,在使用该组件的页面对应json文件中添加:
"usingComponents": { "color-picker":"/components/color-picker/color-picker" }
具体如何引入组件请参考微信小程序官方文档
截图示例仿照PS的色相立方体制作而成
WXMLJS
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实现拾色器插件 前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? ...
摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...
摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...
摘要:说明这篇文章主要介绍的就是一些浏览器的小技巧,很简单,希望对大家有所帮助。颜色的,或十六进制表示。单击其中一个方块将颜色更改为该方块。在当前颜色的,和表示之间切换。 说明 这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏...
阅读 3594·2021-11-23 09:51
阅读 1958·2021-11-16 11:42
阅读 3171·2021-11-08 13:20
阅读 1074·2019-08-30 15:55
阅读 2147·2019-08-30 10:59
阅读 1213·2019-08-29 14:04
阅读 932·2019-08-29 12:41
阅读 1909·2019-08-26 12:22