Download mini color picker - download do código-fonte mini color picker

mini color picker

Código-Fonte de IA

1.0.0

Baixar

Mini seletor de cores

O componente seletor de cores do miniaplicativo (seletor de cores) seleciona cores na paleta de cores e é usado para cenas definidas pelo usuário.

característica:

Análise de soluções existentes

O seletor de cores precisa prestar atenção ao posicionamento dos componentes, a operação não é suave e a operação não é suave e a configuração é complicada. Seu posicionamento esticará a página original, resultando em uma experiência ruim. A distância de deslizamento é diferenciada por pixels (fixa), e a resolução do dispositivo precisa ser considerada, o que não favorece multi-end.
PapaerPen usa o componente deslizante original para realizar a seleção deslizante, que não se limita à resolução do dispositivo. No entanto, requer três operações e a implementação interna da seleção de matiz é complicada. Na verdade, não afeta o valor da cor como três componentes (HSV/HSB).

solução

Use o controle deslizante oficial para selecionar o matiz e a visualização móvel para selecionar a saturação e o brilho. Por ser um componente básico oficial, a operação é suave.
Na configuração da área deslizante, após a obtenção do nó real, a proporção é utilizada para afetar a alteração do valor da cor, sem considerar a conversão de rpx.
Em termos de processo de operação, ele está limitado à área de operação do celular, não podendo ser utilizado o Popover na parte inferior para abrir a janela pop-up, que não afeta a página original e destaca os pontos principais.
Em termos de visualização da operação, como a máscara da janela pop-up é inevitável e não pode ser visualizada em tempo real, a cor do controle deslizante de matiz é usada para obter a visualização. Ao mesmo tempo, foram levadas em consideração as questões da área de segurança do iphone-x.

Usar efeito

captura de tela

Amostra

Visualize o efeito nas ferramentas do desenvolvedor => ID do snippet de código: YOF4QUmO7NmW

Instalar e usar

1. Obtenha componentes

idiota

Pode ser instável, mas contém as atualizações de recursos mais recentes

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

Copie a pasta componentes/seletor de cores do projeto para o caminho do componente

npm

Estabilizar

npm install mini-color-picker --save

Para usar o pacote npm, consulte a documentação oficial do miniaplicativo WeChat.

2. Introduzir componentes

Adicione o seguinte ao arquivo json correspondente à página usando este componente:

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

Se estiver usando npm, clique na barra de menu nas ferramentas do desenvolvedor: Ferramentas --> Build npm marque a opção "Usar módulo npm" (a demonstração é o resultado após a compilação);

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

3. Use componentes

Referência/páginas

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

Lista de propriedades

propriedade	tipo	valor padrão	Obrigatório	ilustrar
mostrar	Booleano	falso	sim	Quer exibir
initColor	Corda	rgb(255,0,0)	sim	Cor inicial, representação RGB
máscara	Booleano	verdadeiro	não	Se deve exibir a máscara de fundo
máscarafechável	Booleano	verdadeiro	não	A máscara de fundo pode ser desativada clicando nela?
bindchangeColor	manipulador de eventos		não	Retorno de chamada após seleção de cor, event.detail = {color}
vincular fechar	manipulador de eventos		não	Evento acionado após clicar na máscara de fundo para desligar o seletor de cores

desenvolver

Perceber :

Atualmente não há ligação bidirecional, ou seja, o valor da cor é selecionado pelo usuário após obter o valor inicial e não deve ser alterado por entrada externa (então o significado da seleção da cor é perdido)
Você pode visualizar o valor da cor do controle deslizante em tempo real durante o processo de toque e passar o valor da cor para a página após interromper o toque para evitar o bloqueio causado por setData frequente.
O formato de dados usado para comunicação externa com componentes é rgb. Para evitar a introdução de vários formatos de dados que podem levar à redundância de código em cenários reais, os desenvolvedores podem converter sob demanda e responder ao seguinte conteúdo correspondente na conta pública "MakerGYT". " para obter o código da função de referência: