we-color-picker 微信小程序拾色器(颜色选择器)组件
最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中。。。
项目地址
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() {//设置rpxRatiowx.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.idthis.setData({[`colorData${index}`]: e.detail.colorData})
}
遇到问题?
Issue
wechat: thereshegoes
email: xiaoli350791904@hotmail.com
推广
我做的另一个小程序,专门用来合成沙雕表情的《沙雕表情制作》,大家有兴趣可以玩玩看。
we-color-picker 微信小程序拾色器(颜色选择器)组件相关推荐
- 安卓自定义时间选择器_微信小程序拾色器(颜色选择器)组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事 大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
- 微信小程序 - 公农历通用时间选择器组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类 小程序码 序 最近做了个小程序,需要用到支持公农历的通用时间选择器,找了一圈没有现成的,只能自己撸一 ...
- 微信小程序开发学习5(自定义组件)
微信小程序开发学习5(自定义组件) 1.学习目标 能够知道如何自定义小程序组件 能够知道小程序组件中behaviors的作用 能够知道如何安装和配置vant-weapp组件库 能够知道如何使用MobX ...
- 微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
- 微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件 微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
- 微信小程序56个民族数组选择器
微信小程序56个民族数组选择器 wxml部份: <view class="section"><picker bindchange="bindPicker ...
- 微信小程序网悦新闻开发--自定义组件开发(六)
目录 微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
- 微信小程序小说阅读器/在线故事阅读丨可以android studio运行
<微信小程序小说阅读器+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用 ...
最新文章
- 注意语句顺序 防止Servlet Request Response乱码
- 昨天,JetBrains 推出“下一代 IDE”,快看看有哪些值得期待的功能!
- 在控制台中录入一个字符串 , 打印这个字符串中的字符以及出现的次数(Python)
- phpcmsV9 完整更新ckeditor编辑器到最新版 - 源码篇
- pandas小记:pandas数据输入输出
- 使用Word的VBA功能过滤敏感词,实现网络文章过审
- 《游戏设计艺术(第二版)》读书笔记
- 计算机大学老师简介,南开大学计算机学院导师教师师资介绍简介-李敏
- python for ArcGIS 绘制上海市环线地图
- 【09年的MACBOK PRO 安装双系统极简教程】
- RabbitMQ-全面详解(学习总结---从入门到深化)
- Oracle数据库 | Oracle并发与一致性
- ipad概念画板手写+svg动画效果
- CSS加载失败眉毛,CSS加载失败的6个原因
- python2的socks5代理 文件上传
- Elelemt-UI el-table 接收后端返回换行符 /n 不生效
- 2020.06新闻文章回顾
- ATA-3000线缆测试仪,高精度测量仪器
- 虚拟化技术在企业网络中的应用
- gensim中的word2vec的使用