# wxs-color-picker

**Repository Path**: musal/wxs-color-picker

## Basic Information

- **Project Name**: wxs-color-picker
- **Description**: 用于微信小程序的颜色选择器，基于wxs实现，可以实现流畅的跟手颜色选择操作
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2021-08-18
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wxs-color-picker

#### 介绍
用于微信小程序的颜色选择器，基于wxs实现，可以实现流畅的、跟手的、无限制滑动颜色选择操作

#### 示例
![演示效果](./screenshots/demo.gif "演示效果")

#### 安装教程
1、只用单一颜色选择导入components/color-picker文件；<br/>
2、需要使用详细颜色选择导入components/full-color-picker文件；<br/>
3、微信开发者工具查看代码片段：https://developers.weixin.qq.com/s/YDpdEFmz7qsn；<br/>

#### 使用说明
1、直接在使用页面json引入

```
{
  "usingComponents": {
    "color-picker": "../components/full-color-picker/full-color-picker",
    "s-color-picker": "../components/color-picker/color-picker"
  }
}
```
2、wxml使用示例

```
<view class="intro" style="color: {{color}}">
  欢迎使用代码片段，可在控制台查看代码片段的说明和文档
  <view class="container">
    <color-picker bindpickingend="changeColor" bindpicking="changeColor" bindpickingstart="changeColor" offsetX="130"
    detailOffsetX="100" detailOffsetY="100">
    </color-picker>
  </view>

  <view class="s_container">
    <s-color-picker offsetX="20" bindpickingend="changeColor" bindpicking="changeColor" bindpickingstart="changeColor" width="100" colors="{{colors}}">
    </s-color-picker>
  </view>
</view>
```
3、属性说明
<br/>color-picker：
| 属性  | 类型  | 默认值  | 是否必填  |  说明 |
|---|---|---|---|---|
| offsetX  |  Number | 0  |  否 | 初始化颜色指示所在偏移  |   
| height | Number | 25 | 否 | 初始化颜色条的高度 |
| bindpickingstart  | EventHandler  |  / | 否  |  颜色选择开始，通过event.detail取当前选择的颜色值，event.detail结构：{eventName,hexColor,rgbColor}  |   
| bindpicking  | EventHandler  | / | 否  | 颜色选择中，通过event.detail取当前选择的颜色值，event.detail结构：{eventName,hexColor,rgbColor}  |   
| bindpickingend  | EventHandler  |  / | 否  |  颜色选择结束，通过event.detail取当前选择的颜色值，event.detail结构：{eventName,hexColor,rgbColor}|   

<br/>full-color-picker:包含color-picker所有属性，以下仅为其独有属性
| 属性  | 类型  | 默认值  | 是否必填  |  说明 |
|---|---|---|---|---|
| detailOffsetX  |  Number | 0  |  否 | 初始化详细颜色指示所在横向偏移  |   
| detailOffsetY  |  Number | 0  |  否 | 初始化详细颜色指示所在竖向偏移  |   
| barHeight      |  Number | 25 |  否 | 初始化颜色条高度 |
| detailDisplayBlackRatio |  Number | 0.7 | 所有颜色黑色方向展示的比例，1为完全展示 |