Descarga mini color picker - mini color picker Descarga del código fuente

mini color picker

Código Fuente de IA

1.0.0

Descargar

Mini selector de color

El componente selector de color del subprograma selecciona colores a través de la paleta de colores y se utiliza para escenas definidas por el usuario.

característica:

Análisis de soluciones existentes.

We-color-picker debe prestar atención al posicionamiento de los componentes, la operación no es fluida y la operación no es fluida y la configuración es complicada. Su posición alargará la página original, lo que dará como resultado una mala experiencia. La distancia de deslizamiento se diferencia por píxeles (fija) y se debe considerar la resolución del dispositivo, lo que no favorece el uso de múltiples extremos.
PapaerPen utiliza el componente deslizante original para realizar una selección deslizante, que no se limita a la resolución del dispositivo. Sin embargo, requiere tres operaciones y la implementación interna de la selección del tono es engorrosa. Realmente no afecta el valor del color como tres componentes (HSV/HSB).

solución

Utilice el control deslizante oficial para seleccionar el tono y la vista móvil para seleccionar la saturación y el brillo. Dado que es un componente básico oficial, el funcionamiento es sencillo.
En la configuración del área deslizante, después de obtener el nodo real, la proporción se utiliza para afectar el cambio del valor del color, sin considerar la conversión de rpx.
En términos del proceso de operación, se limita al área de operación del teléfono móvil y no se puede usar Popover. Utilice la parte inferior para abrir la ventana emergente, que no afecta la página original y resalta los puntos clave.
En términos de vista previa de la operación, dado que la máscara de la ventana emergente es inevitable y no se puede obtener una vista previa en tiempo real, el color del control deslizante de tono se utiliza para lograr la vista previa. Al mismo tiempo, se tuvieron en cuenta los problemas de seguridad del iPhone-x.

efecto de uso

captura de pantalla

Muestra

Vista previa del efecto en herramientas de desarrollo => ID del fragmento de código: YOF4QUmO7NmW

Instalar y usar

1. Obtener componentes

git

Puede ser inestable, pero contiene las últimas actualizaciones de funciones.

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

Copie la carpeta de componentes/selector de color en el proyecto a la ruta del componente

npm

Estabilizar

npm install mini-color-picker --save

Para utilizar el paquete npm, consulte la documentación oficial del subprograma WeChat.

2. Introducir componentes

Agregue lo siguiente al archivo json correspondiente a la página que usa este componente:

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

Si usa npm, haga clic en la barra de menú en las herramientas de desarrollador: Herramientas --> Construir npm; marque la opción "Usar módulo npm" (la demostración es el resultado después de la compilación);

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

3. Utilice componentes

Referencia/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 propiedades

propiedad	tipo	valor predeterminado	Requerido	ilustrar
espectáculo	booleano	FALSO	Sí	Ya sea para mostrar
colorinicial	Cadena	rgb(255,0,0)	Sí	Color inicial, representación rgb.
mascarilla	booleano	verdadero	No	Ya sea para mostrar la máscara de fondo
máscaraCerrable	booleano	verdadero	No	¿Se puede desactivar la máscara de fondo haciendo clic en ella?
enlazarcambiarColor	controlador de eventos		No	Devolución de llamada después de la selección de color, event.detail = {color}
enlazarcerrar	controlador de eventos		No	Evento activado después de hacer clic en la máscara de fondo para desactivar el selector de color

desarrollar

Aviso :

Actualmente no existe un enlace bidireccional, es decir, el valor del color lo selecciona el usuario después de obtener el valor inicial y no debe cambiarse mediante entrada externa (entonces se pierde el significado de la selección de color)
Puede obtener una vista previa del valor del color del control deslizante en tiempo real durante el proceso táctil y pasar el valor del color a la página después de detener el toque para evitar el bloqueo causado por setData frecuentes.
El formato de datos utilizado para la comunicación externa con los componentes es rgb. Para evitar la introducción de múltiples formatos de datos que puedan provocar redundancia de código en escenarios reales, los desarrolladores pueden convertir bajo demanda y responder al siguiente contenido correspondiente en la cuenta pública "MakerGYT". " para obtener el código de función de referencia: