resumen
Esta versión de Iscroll 4 reescribe completamente el código original del marco de IScroll. Este proyecto se creó completamente debido al uso generalizado de los navegadores móviles de WebKit (como iPhone, iPad, Android)
Se proporciona una forma localizada de deslizar el contenido de un elemento que define la altura y el ancho. Desafortunadamente, en este caso, las páginas de todas las aplicaciones web no pueden contener un encabezado, final de la página o un contenido desplazable con la posición: Absolte.
Área media.
Sin embargo, la última revisión del sistema Android ya puede admitir esta característica (aunque el soporte no es particularmente bueno), y Apple parece reacio a aplicar el evento de diapositiva de un dedo al elemento DIV.
Además de las características de las versiones anteriores de Iscroll, IScroll 4 también incluye las siguientes características:
(1) zoom (pellizco/zoom)
(2) Tire hacia arriba/hacia abajo para actualizar
(3) Mejora de la velocidad y el rendimiento
(4) Capturar los elementos con precisión
(5) barra de desplazamiento personalizado
Consejos amistosos: IScroll 4 no es una alternativa simple a ISCROLL 3, y la documentación de la API ya es diferente. También teniendo en cuenta que esta versión está en beta, algunas API pueden tener cambios menores.
Guía del usuario
En este documento encontrará muchos ejemplos para enseñarle cómo comenzar rápidamente con la biblioteca de scripts de IScroll. Puede ser un poco aburrido referirse al ejemplo de demostración en el artículo y leer este documento cuidadosamente, pero este artículo es la esencia de la biblioteca de guiones ISCROLL.
Iscroll necesita inicializar los elementos para desplazarse, y no limita el número de elementos que usan IScroll en una página (la configuración de su hardware no se considera aquí). El tipo y la longitud del contenido en el elemento de desplazamiento afectará la biblioteca de scripts de IScroll hasta cierto punto
El número de elementos que se pueden usar simultáneamente.
Al usar la biblioteca de scripts IScroll, la estructura del árbol DOM debe ser lo suficientemente simple como para eliminar las etiquetas innecesarias e intentar evitar el anidación excesiva de las etiquetas.
La estructura óptima del uso de Iscroll es la siguiente:
<div id = "WRAPPER"> <ul> <li> </li> ...... </ul> </div>
En este pequeño ejemplo, la etiqueta UL se desplazará. Iscroll debe estar conectado al envoltorio fuera del contenido de desplazamiento para producir resultados.
【Precauciones】:
Solo se puede desplazar el primer elemento infantil en la envoltura. Si desea más elementos para desplazarse, puede probar el siguiente método de escritura:
<div id = "wrapper"> <div id = "Scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
En este ejemplo, el elemento del desplazador se puede desplazar incluso si contiene dos elementos UL
Iscroll debe ser instanciado antes de llamar, puede instanciar ISCROLL en los siguientes casos:
(1) Use el evento OnDomContentLoaded para lograr el desplazamiento
Adecuado para desplazamiento de contenido solo contiene texto e imágenes, y todas las imágenes tienen tamaños fijos
<script src = "iscroll.js"> </script> <script> var myScroll; function loaded () {myScroll = new iscroll ("wrapper"); } window.adDeventListener ("DomContentLoaded", cargado, falso); </script>NOTA: La variable myScroll es global, por lo que puede llamarlo a cualquier parte
(2) Use el evento de Onload para lograr el desplazamiento
Debido a que se llamará al evento de DomContentLoaded después de cargar la estructura DOM, la longitud y el ancho del área de desplazamiento pueden no determinarse antes de que los elementos como las imágenes no se carguen. En este momento, se puede implementar el evento Onload.
<script src = "iscroll.js"> <script> <script> var myScroll; function loaded () {setTimeOut (function () {myScroll = new Iscroll ("Wrapper");}, 100); } window.adDeventListener ("cargar", cargado, falso); </script>En este caso, IScroll se inicializará después de que los recursos de la página (incluidas las imágenes) se carguen 100 ms. Esta debería ser una forma relativamente segura de llamar a ISCROLL.
(3) Inicialización de en línea
Esta situación se llamará cuando la página se cargue en JS. No se recomienda este método, pero muchos BigWigs de JavaScript están utilizando este método. ¿Qué razón tengo que estar en desacuerdo?
<script src = "iscroll.js"> </script> <div id = "wrapper"> <ul> <li> </li> ... </ul> </div> <script> var myscroll = new iscroll ("wrapper"); </script>Sin embargo, se recomienda que utilice algunos métodos de Marco Ready para llamar de forma segura a ISCROLL (como Ready () en jQuery).
Parámetros pasados en iscroll
El segundo parámetro en Iscroll le permite personalizar algún contenido, como el siguiente código:
<script> var myScroll = new Iscroll ("WRAPPER", {HSCROLLBAR: FALSE, VSCROLLBAR: FALSE}); </script>El segundo parámetro suele ser un objeto. Por ejemplo, la barra de desplazamiento no se muestra en el ejemplo anterior. Los parámetros de uso común son los siguientes:
hscroll falso prohíbe desplazamiento horizontal verdadero desplazamiento horizontal predeterminado a verdadero
vscroll falso scroll vertical vertical verdadero desplazamiento vertical predeterminado a verdadero
Hscrollbar False esconde barras de desplazamiento en dirección horizontal
vscrollbar falso ocultar barra de desplazamiento en dirección vertical
Fixedscrollbar en el sistema iOS, cuando el arrastre de elementos excede el límite del desplazador, la barra de desplazamiento se encoge. Establecido en verdadero para evitar que la barra de desplazamiento exceda el desplazador.
El área visible del desplazador. El valor predeterminado es verdadero en Android y falso en iOS
Fadescrollbar false especifica para ocultar barras de desplazamiento cuando no hay efecto de desvanecimiento
Hidescrollbar esconde la barra de desplazamiento cuando no hay interacción de usuario predeterminada a verdaderas
rebote habilitar o deshabilitar el rebote de los límites, predeterminado a verdadero
Momentum habilita o deshabilita la inercia, predeterminada es verdadera, este parámetro es muy útil cuando desea guardar recursos.
LockDirection False cancelas de bloqueo de la dirección de arrastre, el tráfico verdadero solo puede estar en una dirección (arriba/hacia abajo o izquierda/derecha)
Logro de varios efectos
Descripción de la demostración de actualizar 'Tirar para actualizar'
Este efecto se ha vuelto muy popular desde que Twitter y algunas aplicaciones locales de Apple han aparecido. Puedes echar un vistazo aquí.
En la última versión, el autor separa la parte "Tirar para actualizar" como un complemento adicional para ISCROLL. Puede hacer clic aquí para ver cómo funciona para actualizar. Todo lo que necesita hacer es personalizar el método pulldownAction (). Es posible que necesite AJAX para cargar contenido nuevo, pero recuerde llamar a la actualización una vez que cambie el árbol DOM. Debe recordarse que en el ejemplo agregamos un retraso de 1 segundo para simular el efecto de retraso de la red. Por supuesto, si no desea usar este retraso, simplemente elimine el método SetTimeOut.
Zoom (pellizco / zoom) 'Tirar para actualizar' Demo
Tenemos que enfrentar el hecho de que simplemente rodar en realidad no es nada nuevo. Es por eso que en esta versión de Iscroll 4 le permitimos ponerlo
Grande y encogido. Para querer esta función, solo necesita establecer el parámetro Zoom en verdadero para usar gestos para acercarse y salir. Puedes echar un vistazo aquí.
El doble clic para acercar y salir también se admite en ISCROLL 4. Para usar la función Zoom, necesita al menos la siguiente configuración:
var myScroll = new iscroll ("wrapper", {zoom: true});
Si desea personalizar la función Zoom en profundidad, puede usar algunas de las siguientes opciones:
ZoomMax especifica el múltiplo máximo que permite una ampliación, el valor predeterminado es 4
[Notas]: si desea que la escala de imagen sea efectiva, debe colocarlos en la capa de síntesis de hardware. En términos de Layman, es usar -Webkit -Transform: Translate3D (0,0,0) en todos los elementos IMG que deben escalarse. Y es particularmente importante que la aceleración de hardware ocupe muchos recursos y debe usarse con precaución, de lo contrario su aplicación puede bloquearse.
Snap y Snap to Element 'Carousel' Demo
La función SNAP es determinar si el elemento se desliza a la posición especificada. Este efecto le permite crear un efecto de marquesina elegante.
El complemento analizará automáticamente elementos de la misma etiqueta o del mismo tamaño en el área de desplazamiento que el objeto de captura, y también puede especificar el objeto capturado a través de los parámetros.
var myScroll = new Iscroll ("Wrapper", {Snap: True, Momentum: False, HSCrollbar: False, VSCrollbar: False});Puede configurar el objeto SNAP configurando el parámetro SNAP en la etiqueta especificada. Por ejemplo, captura la etiqueta Li.
var myScroll = new Iscroll ("Wrapper", {Snap: "Li", Momentum: False, Hscrollbar: False, VScrollBar: False});En este ejemplo, el desplazador puede capturar el elemento LI más izquierdo en el área de desplazamiento
Barras de desplazamiento personalizadas
En Iscroll 4, se puede usar una serie de CSS para personalizar la representación de las barras de desplazamiento. Puede agregar un parámetro de clase a la barra de desplazamiento, como sigue:
var myScroll = new Iscroll ("Wrapper", {ScrollBarClass: "myScrollBar"});Cabe señalar que la barra de desplazamiento está compuesta de dos elementos: el contenedor y la pantalla. El contenedor tiene la misma altura que el envoltorio, mientras que la pantalla representa la barra de desplazamiento en sí.
La estructura HTML de la barra de desplazamiento es la siguiente:
<Div> <Viv> </div> </div> .myscrollbarv {posición: absoluto; z-odex: 100; ancho: 8px; fondo: 7px; top: 2px; right: 1px; } .myscrollBarv> div {posición: absoluto; z-índice: 100; ancho: 100%; / * Lo siguiente es probablemente lo que desea personalizar */en segundo plano: -webkit-gradiente (lineal, 0 0, 100% 0, de (#f00), a (#900))); border: 1px sólido#800; -webkit-background-clip: padding-box; -webkit-box-sizing: border-box; -webkit-border-radius: 4px; 1PX 1PX 0 RGBA (255,255,255,0.5); }Método general:
(1) Actualizar este método debe llamarse cuando cambia el árbol DOM
por ejemplo: setTimeOut (function () {myscroll.refresh ();}, 0);
(2) IScroll también proporciona tres métodos: ScrollTO, ScrollToelement y ScrollTopage, para que pueda controlar el efecto de desplazamiento a través de JavaScript.
ScrollTO (x, y, tiempo, relativo): deje que el contenido Scrollbar X/Y posición dentro del tiempo especificado. Por ejemplo, myscroll.scrollto (0, -100, 200) se desplaza hacia abajo por 100 píxeles en 200 milisegundos. myScroll.scrollto (0, 10, 200, verdadero) puede lograr el efecto de desplazar 10 píxeles en el eje Y dentro de 200 milisegundos en relación con la posición actual.
ScrollToElement (elemento, tiempo): desplácese al elemento especificado dentro del tiempo especificado. Por ejemplo, myscroll.scrolltoelement ('li: enésimo hijo (10)', 100) se desplaza a la posición del décimo elemento LI en 100 milisegundos. El primer parámetro se puede usar para filtrar elementos con el selector en CSS3.
Snaptopage (Pagex, Pagey, Tiempo): Desplácese de la página 1 a la página 2 en 200 milisegundos (0 representa la página 1, 1 representa la página 2). Esta función puede llamarse cuando se usa la función SNAP.
(3) Detroy () elimina completamente MyScroll y su espacio de memoria ocupado
por ejemplo: myscroll.destroy ();
myScroll = nulo;
La dirección de desarrollo de iscroll
Soporte de dominio de formulario
Optimización de escala
Mejor compatibilidad del navegador de escritorio
Optimización del evento ONScrol
Cambios en la adición de un valor hash
Actualización automática después de que cambie DOM