特性:

现有方案分析

  • we-color-picker

    需注意组件定位,操作不跟手不流畅,配置复杂。其定位会撑开原有页面,体验不佳。滑动距离按像素区分(固定),需考虑设备分辨率,不利于多端。
  • PapaerPen

    利用原有slider组件实现滑动选取,不限于设备分辨率。但需分三次操作,且在色相的选定上内部实现繁琐.并不是真正作为三个分量(HSV/HSB)去影响色值

解决方案

  • 利用官方提供的slider实现选择色相,movable-view选择饱和度和明度,由于是官方基础组件,操作顺畅。
  • 在滑动区域的设定上,获取实际节点后使用占比来影响色值变化,无需考虑rpx转换。
  • 在操作流程上,限于手机操作区域,不能使用Popover,使用底部拉起弹窗,不影响原有页面,重点突出
  • 在操作预览上,由于弹窗遮罩不可避免无法实时预览,采用色相滑块的颜色来实现预览。同时考虑了iphone-x的安全区域问题。

使用效果

截图



样例

在开发者工具中预览效果=>代码片段ID:GcP4LBmv77h6

安装使用

1. 获取组件

git

可能不稳定,但包含最新功能更新

git clone https://github.com/MakerGYT/mini-color-picker.git

将项目中components/color-picker文件夹拷贝到组件路径下

npm

稳定

npm install mini-color-picker --save

使用npm包请参考微信小程序官方文档

2. 引入组件

在使用该组件的页面对应json文件中添加:

{
"usingComponents": {
"color-picker":"/components/color-picker/color-picker"
}
}

如使用npm,

点击开发者工具中的菜单栏:工具 --> 构建 npm;

勾选“使用 npm 模块”选项(demo为构建后的结果)

{
"usingComponents": {
"color-picker":"mini-color-picker/color-picker"
}
}

3. 使用组件

参考/pages

<!-- index.wxml -->
<view style="background:{{rgb}};width:100px;height:24px;" bindtap="toPick"></view>
<color-picker bindchangeColor="pickColor" initColor="{{rgb}}" show="{{pick}}" />
Page({
data:{
rgb: 'rgb(0,154,97)',//初始值
pick: false
},
// 显示取色器
toPick: function () {
this.setData({
pick: true
})
},
//取色结果回调
pickColor(e) {
let rgb = e.detail.color;
},
})

属性列表

属性 类型 默认值 必填 说明
show Boolean false 是否显示
initColor String rgb(255,0,0) 初始色,rgb表示
mask Boolean true 是否显示背景蒙层
maskClosable Boolean true 点击背景蒙层是否可以关闭
bindchangeColor eventhandler 取色后的回调,event.detail = {color}
bindclose eventhandler 点击背景蒙层关闭掉color-picker后触发的事件

开发

注意:

  1. 目前没有双向绑定,即获取初始值后色值由用户选取得到,不应该由外部传入改变(那样也就失去了取色的意义)
  2. 可以在触控过程中通过对滑块的颜色实时预览色值,而在停止触控后将色值传入页面,是为了避免频繁setData引起阻塞.
  3. 外部与组件通信的数据格式是rgb,为了避免引入多种数据格式而导致实际场景代码冗余,开发者可自行按需转换,在公众号"MakerGYT"回复以下对应内容获取参考函数代码:
  • rgb2hex
  • rgb2hsv
  • rgb2cmyk
  • hex2rgb
  • hsv2rgb

案例

License

MIT MakerGYT

小程序拾色器(颜色选择器)组件mini-color-picker的更多相关文章

  1. 使用css3和javascript开发web拾色器实例

    本实例中的web拾色器功能使用css3实现页面效果,即在页面上显示的元素用css3样式来实现的.再使用js生成拾色器颜色数据,并控制各元素的鼠标事件.当事件作为反应时,获取到对应的数据并显示颜色值. ...

  2. 拾色器,可以取出电脑屏幕的任何颜色,ui以及程序员前端等常用软件,文件很小,300K

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 今天给大家介绍一个小软件,挺实用的,叫做拾色器. 用途:取出电脑屏幕的任意颜色,当你 ...

  3. Android Studio中如何设置颜色拾色器工具

    Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...

  4. Linux下的高级拾色器—Pick

    导读 虽然大多数设计师都在使用 Mac,但也有一少部分在使用 Windows 甚至是 Linux 系统.在 Mac 和 Windows 中都有非常丰富的拾色器工具或插件可用,反而在开源界中这类颜色选择 ...

  5. 优动漫PAINT基础系列之拾色器教学

    在优动漫PAINT中有类似Photoshop的拾色器功能么?在优动漫PAINT中,可以直接输入颜色数值选择颜色么?当然是可以的啦!怎么呼出拾色器界面~ 看这边... 前段时间小编有收到一些小伙伴的疑问 ...

  6. 使用 HTML5 canvas制作拾色器

    自制的拾色器漂亮吧,哈哈 废话不多说直接上代码,希望可以帮到需要的朋友 <html><head>    <style>        .canvas_color{p ...

  7. 微信小程序把玩(十一)icon组件

    原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...

  8. HTML-参考手册: HTML 拾色器

    ylbtech-HTML-参考手册: HTML 拾色器 1.返回顶部 1. HTML 拾色器 选取颜色:     或输入颜色值: OK 或使用 HTML5: 选择的颜色: 黑色文本 阴影 白色文本 阴 ...

  9. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

随机推荐

  1. Java实现 LeetCode 119 杨辉三角 II

    119. 杨辉三角 II 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 进阶: ...

  2. Java实现蓝桥杯 算法训练 大等于n的最小完全平方数

    试题 算法训练 大等于n的最小完全平方数 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 输出大等于n的最小的完全平方数. 若一个数能表示成某个自然数的平方的形式,则称这个数为完全平 ...

  3. Java实现 LeetCode_0048_RotateImage

    package javaLeetCode.medium; public class RotateImage_48 { public static void main(String[] args) { ...

  4. TCP/IP三次握手协议

    一.简介         三次握手协议指的是在发送数据的准备阶段,服务器端和客户端之间需要进行三次交互,OSI参考模型中的网络层,在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一 ...

  5. linux系统判断内存是否达到瓶颈的小技巧

    1.linux下最常用的系统状态监控工具top 工具,可以使用top -c 来进行查看当前内存的占用情况 free 为内存的剩余状态,当前为3.8G的空闲内存,总的物理内存是8G,按键 shift+m ...

  6. 温故知新-快速理解Linux网络I/O

    文章目录 摘要 阻塞.非阻塞.同步.异步 Linux下的I/O模型 阻塞I/O模型 非阻塞I/O模型 I/O复用模型 select poll epoll 信号驱动I/O模型 异步I/O 参考 你的鼓励 ...

  7. Servlet中的请求转发

    请求转发时,传递到下一个servlet的request和response可能内存地址不同,但是里面包含的内容是相同的 // servlet1 RequestDispatcher dispatcher ...

  8. xlua中lua对象到c#对象的转型

    lua中的类型 基础类型 #define LUA_TNIL 0 #define LUA_TBOOLEAN 1 #define LUA_TLIGHTUSERDATA 2 #define LUA_TNUM ...

  9. InstallShield 2015 Limited Edition 打包教程

    InstallShield 2015 Limited Edition 打包教程 右键解决方案,新增项目,选择其他项目类型,安装和部署. InstallShield2015可以免费使用,但需要下载.安装 ...

  10. 实验四 Linux系统C语言开发环境学习

    项目 内容 这个作业属于哪个课程 Linux系统与应用 这个作业的要求在哪里 作业要求链接 学号-姓名 17041428-朱槐健 作业学习目标 1.Linux系统下C语言开发环境搭建 2.学习Linu ...