Скачать mini color picker - mini color picker Скачать исходный код

mini color picker

AI Исходный код

1.0.0

Скачать

Мини-палитра цветов

Компонент апплета выбора цвета (палитра цветов) выбирает цвета из цветовой палитры и используется для пользовательских сцен.

характеристика:

Анализ существующих решений

Мы, подбирающие цвета, должны обращать внимание на позиционирование компонентов, работа не является плавной и не плавной, а конфигурация сложна. Его позиционирование растянет исходную страницу, что приведет к ухудшению восприятия. Расстояние скольжения различается по пикселям (фиксированное), и необходимо учитывать разрешение устройства, что не способствует многоконцевости.
PapaerPen использует оригинальный компонент слайдера для реализации скользящего выбора, который не ограничивается разрешением устройства. Однако для этого требуется три операции, а внутренняя реализация выбора оттенка громоздка. Это не особо влияет на значение цвета как три компонента (HSV/HSB).

решение

Используйте официальный ползунок для выбора оттенка и подвижный вид для выбора насыщенности и яркости. Поскольку это официальный базовый компонент, работа выполняется плавно.
В настройке скользящей области после получения фактического узла пропорция используется для воздействия на изменение значения цвета без учета преобразования rpx.
Что касается процесса работы, он ограничен рабочей областью мобильного телефона, и Popover нельзя использовать. Используйте нижнюю часть, чтобы открыть всплывающее окно, которое не влияет на исходную страницу и выделяет ключевые моменты.
Что касается предварительного просмотра операции, поскольку маска всплывающего окна неизбежна и ее нельзя просмотреть в реальном времени, для предварительного просмотра используется цвет ползунка оттенка. В то же время были приняты во внимание вопросы безопасности iphone-x.

Использовать эффект

скриншот

Образец

Предварительный просмотр эффекта в инструментах разработчика => Идентификатор фрагмента кода: YOF4QUmO7NmW

Установите и используйте

1. Получите компоненты

мерзавец

Может работать нестабильно, но содержит последние обновления функций.

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

Скопируйте папку компонентов/палитры цветов в проекте в путь к компоненту.

НПМ

Стабилизировать

npm install mini-color-picker --save

Чтобы использовать пакет npm, обратитесь к официальной документации апплета WeChat.

2. Знакомство с компонентами

Добавьте следующее в файл json, соответствующий странице, использующей этот компонент:

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

Если вы используете npm, щелкните строку меню в инструментах разработчика: Инструменты -> Сборка npm; установите флажок «Использовать модуль npm» (демонстрация — это результат сборки).

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

3. Используйте компоненты

Ссылка/страницы

 <!-- 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 ;
  } ,
} )

Список недвижимости

свойство	тип	значение по умолчанию	Необходимый	иллюстрировать
показывать	логическое значение	ЛОЖЬ	да	Отображать ли
initColor	Нить	RGB(255,0,0)	да	Исходный цвет, представление RGB
маска	логическое значение	истинный	нет	Отображать ли фоновую маску
маскаЗакрываемая	логическое значение	истинный	нет	Можно ли отключить фоновую маску, нажав на нее?
связывание цвета	обработчик событий		нет	Обратный вызов после выбора цвета, event.detail = {color}
связатьзакрыть	обработчик событий		нет	Событие срабатывает после нажатия на фоновую маску, чтобы отключить палитру цветов.

развивать

Уведомление :

Двусторонняя привязка на данный момент отсутствует, то есть значение цвета выбирается пользователем после получения исходного значения и не должно изменяться внешним вводом (тогда смысл выбора цвета теряется)
Вы можете просмотреть значение цвета ползунка в реальном времени во время процесса касания и передать значение цвета на страницу после остановки касания, чтобы избежать блокировки, вызванной частым набором данных.
Формат данных, используемый для внешней связи с компонентами, — rgb. Чтобы избежать введения нескольких форматов данных, которые могут привести к избыточности кода в реальных сценариях, разработчики могут конвертировать по требованию и отвечать на следующий соответствующий контент в общедоступной учетной записи «MakerGYT». ", чтобы получить код эталонной функции: