Vuescroll: barra de desplazamiento virtual basada en Vue
Recomiendo una barra de desplazamiento basada en Vue: Vuescroll
Dirección de GitHub: vuescroll
He entrado en contacto con un sistema de gestión en segundo plano llamado H antes, y ocasionalmente Descubrí que usa No hay una barra de desplazamiento en el lado izquierdo del menú, así que revisé cuidadosamente el dom y descubrí que hay un pequeño div al lado del lado izquierdo del menú H. Lo arrastré y se podía desplazar por el menú. Entendí que se estaba usando una barra de desplazamiento virtual. Pensé que era bueno y luego verifiqué la barra de desplazamiento virtual nuevamente. Después de arrastrar, el menú se puede desplazar. Entiendo que se trata de una barra de desplazamiento virtual. Siento que esto es bueno. Luego miré el código fuente de esta barra de desplazamiento virtual y descubrí que está basada en una biblioteca jquery llamada SlimScroll. . parte. Como estoy familiarizado con Vue, quería crear una barra de desplazamiento similar usando Vue.
Al principio, el enfoque slimScroll no funcionó bien. El método de desplazamiento de contenido de desplazamiento delgado es:
Esto tiene dos deficiencias fatales:
¡Ambas deficiencias conducirán a una experiencia de interfaz de usuario muy mala!
Más tarde, descubrí accidentalmente que element-ui también usa barras de desplazamiento virtuales, y el efecto es muy bueno, especialmente cuando se desliza en el terminal móvil. Cada vez que la mano sale de la pantalla después de deslizarse, puede continuar. para deslizarse una cierta distancia Funciona mejor que slimscroll, así que fui al github de element-ui para encontrar el código fuente de la barra de desplazamiento. Al leer el código fuente, descubrí que el código fuente de element-ui era diferente. No pude encontrar el código fuente. Al leer el código fuente, descubrí que element-ui activa el desplazamiento durante el desplazamiento, es decir, configurar el elemento principal del contenido de desplazamiento en desbordamiento: desplazamiento, luego escuchar el evento onScroll del elemento principal y luego mover el contenido de desplazamiento. en la devolución de llamada del evento onScroll. Después de una mejora continua, finalmente logré el mismo efecto que la barra de desplazamiento de element-ui.
Más tarde, encontré algunas buenas barras de desplazamiento y agregué su funcionalidad. Como detector de tamaño de elemento, barra de desplazamiento, barra de desplazamiento suave, barra de desplazamiento Porter, etc. Ahora, Vuescroll se ha actualizado a una potente barra de desplazamiento.
Sus funciones básicas son las siguientes:
En general, Vuescroll es más que una simple barra de desplazamiento. Puedes usarlo para crear un carrusel, un selector de tiempo, un complemento que detecta automáticamente cuándo cambia el contenido y más.
Materiales de referencia