Código de implementación para implementar el desplazamiento infinito de los elementos del contenedor N

Cómo representar correctamente una lista de hasta 10000 elementos.

La tecnología de carga desplegable Infinita permite a los usuarios desplazarse y ver frente a una gran cantidad de bloques de contenido. Este método es seguir cargando contenido nuevo a medida que se desplaza hacia abajo.

Cuando usa el desplazamiento como el método principal para descubrir datos, puede permitir a sus usuarios permanecer en la página web por más tiempo y aumentar la participación del usuario. Con la popularidad de las redes sociales, los usuarios consumen una gran cantidad de datos. El desplazamiento inalámbrico proporciona una forma eficiente de permitir a los usuarios navegar en grandes cantidades de información sin tener que esperar a que la página sea precargada.

Si cambiamos nuestra forma de pensar, si hay 10,000 componentes de columna recta en una página, ¿cómo podemos usar 5 componentes para representar dinámicamente la página completa?

En la optimización de listas largas, tenemos muchas soluciones, como la paginación, la carga perezosa, etc. Hay una muy buena interacción (imagen de crisantemo), para que el usuario pueda esperar. Este plan también es muy exitoso.

¿Cómo encontrar otra forma?

1. En la aplicación de páginas individuales, ¿podemos analizar el esquema de paginación una vez, con 10 elementos por página, y 10 elementos por página se representan de acuerdo con

2. ¿Podemos usar un soporte para admitir la longitud completa de la lista cuando la pantalla se desplaza a la posición correspondiente y representa los 10 elementos correspondientes?

Cuando implementemos esta idea, habrá un problema parpadeante. Dado que los eventos de desplazamiento son frecuentes, encontramos que los elementos que vemos están constantemente repintando, porque encontramos qué diez elementos deben representarse en cada escena, y luego reemplazarlos directamente.

La idea aquí es que cuando veo la posición de la pantalla, presionaré 10 y luego 10 hacia arriba y hacia abajo, con un total de 30. Al controlar la representación, siempre reemplazo los elementos superiores o inferiores, de modo que la parte que podamos ver en el medio no se vuelva a pintar ni renderizará. Es solo que los datos previamente renderizados se están rediseñando.

Implemente un componente que pueda mostrar una lista de n elementos con un tamaño de ventana fijo de 5 elementos: es decir, en cualquier momento, solo hay 5 contenedores DOM en los elementos de N Infinite Scroll.

 <ul> <li style = transform: traduce3d (0px, 0px, 0px);>… </li> <li style = transform: traduce3d (0px, 60px, 0px);>… </li> </ul>

• El contenido de una lista larga generalmente tiene reglas. La altura de esta lista se puede calcular directamente a través del número de <li> s. Por ejemplo, 1,000 elementos, y la altura de cada elemento es de 60px. Entonces podemos calcular rápidamente que la altura de la lista real es de 60,000px.
• Después de tener el contenedor, el interno <li> se coloca absolutamente en relación con <ul>, y luego use JS para calcular directamente la 'transformación: traducir3d (0px, 0px, 0px);' atributo correspondiente a cada uno <li>
• Al escuchar el tiempo de desplazamiento, encontramos constantemente el <li> que debe representarse en la ubicación actual, compararlo con el conjunto anterior de datos renderizados. Si hay el mismo <li>, omítalo, averigüe los diferentes elementos del conjunto anterior de datos renderizados y luego realice el reemplazo correspondiente.

Por ejemplo: 100 elementos, 5 se muestran en la página de inicio. Inicialización de [0,1,2,3,4] Estos 5 <li> s deben ser representados. Cuando me desplace un poco hacia abajo, [1,2,3,4,5] estos <li> s deben ser representados. En este momento, no reemplace directamente lo general, solo se deben reemplazar los términos de diferencia. La estructura debe ser [5,1,2,3,4]. Dado que es un posicionamiento absoluto, se separará de la corriente estándar. Un solo redibujado no afectará a los otros cuatro, mejorando así el rendimiento.

 < src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <title> document </title> <style> Body, UL, Li {Margin: 0; relleno: 0; Estilo de lista: Ninguno; } ul {posición: relativo; } ul li {posición: absoluto; arriba: 0; Ancho: 100%; Altura: 31px; Línea de altura: 32px; Border-Bottom: 1px Solid #CCC; } </style> </head> <body> <ul> </ul> </body> <script> // contenedor total var list = []; // elementos en el rango visual var showList = []; // renderizador de contenedor var renderList = []; // Altura de cada contenedor var lineHeight = 32 // Inicializar 1000 elementos para (var i = 0; i <1000; i ++) {list.push ({id: i, text: 'th' + (i + 1) + 'Elements', top: i * lineheight, fondo: (i + 1) * lineheight} // altura de contenedor inicializadora $ ((ul '). 'altura:' + 1000 * lineHeight + 'px') // busca la función render (top, fondo) del contenedor inicial {showList = [] // mark ¿Qué datos se repiten con el renderizado después de que se renderice, esta parte no se repitirá repetidamente var mismoindex = [] // encontrar qué elemento se desplare a la posición var de la posición varinDex = 0 para (var i = 0; i <list.l longitud; item = list [i] if (item.top <= window.scrolly && item.bottom> window.scrolly) {currentIndex = i; romper; }} var range = 0 // Encuentre los elementos que se mostrarán hacia arriba y hacia abajo respectivamente en el elemento encontrado actualmente, hasta que el número total alcanza 35 mientras (rango <100 && showList.length + sameIndex.length <35) {if (currentIndex - range> = 0) {// compare si los elementos que se encuentran en las condiciones están en la lista de renderizadas cuando están en la lista de renderizado, y se encuentran en la lista en la lista de renderizadas, y se encuentran en la lista, y se encuentran en la lista, y se encuentran en la lista de renderizadas, y se encuentran en la lista, y se encuentran en la lista de renderizadas, y se encuentran en la lista de renderizadas, y se encuentran en la lista, y se encuentran en la lista, y se encuentran en la lista, y se encuentran en la lista, y se encuentran en la lista. ShowList En ese momento, reemplace el elemento no marcado if (renderList.includes (list [currentIndex - range] .id)) {// mismoindex.push (currentIndex -range) sameIndex.unshift (renderList.indexof (list [currentIndex - range] .id)} else {showList.unshift (list [currentinDex - range]}}} if (} if (} if (thurning}} if (thurning] »} range < list.length && range != 0) { if (renderList.includes(list[currentIndex + range].id)) { sameIndex.push(renderList.indexOf(list[currentIndex + range].id)) } else { showList.push(list[currentIndex + range]) } } range++ } // Replace the new elements that need to be rendered with the render list elementos que no están marcados si (renderList.length> 0) {for (var i = 0; i <renderlist.length; i ++) {if (! mismoindex.includes (i) && showList.length) {renderList [i] = showList.shift (). id $ ('ul li'). eq (i) .html (list [renderList [i]. Id +list [renderlist [i].] lista [renderList [i]]. top + 'px, 0px);')}}} más {// inicializar la lista para la primera vez renderList = showList.map (function (val) {return val.id}) renderlist.map (function (clave) {$ ('ul'). append ($ ('<li syle = transform: transform: 3d (0px (0px, +, + +, + +, + + List [Key] .Top + 'Px, 0px);>#' + List [Key] .id + List [Key] .Text + '</li>'))})} Console.log (renderList)} // Primer rendering render () $ (Window) .Scroll (function (e) {render ()}); </scrito> </html>

1. El método para reemplazar los elementos del contenedor siempre siente que puede optimizarse, lo que puede mejorar la eficiencia operativa y optimizar la pantalla blanca que aparece rápidamente.
2. Aquí también hay una pregunta de pensamiento [0,1 ..., 10,000]. Cada vez, se eliminan 5 elementos, los recién seleccionados se comparan con los antiguos, y se conserva la parte de intersección de las dos matrices, y la parte de no intersección en la matriz anterior se reemplaza con los nuevos elementos en la nueva matriz. Por ejemplo, la primera vez es [0,1,2,3,4], y la segunda vez es [2,3,4,5,6]. Luego, después de la comparación, se genera [5,6,2,3,4]. Si la tercera vez es [4,5,6,7,8], la generada es [5,6,7,8,4]. Use el número mínimo de códigos para obtener esta matriz de resultados.

1. Diseño completo e inicialización a través de datos
2. Al sentir posicionamiento, el contenedor se elimina del flujo estándar
3. A través de la comparación de datos, descubra los diferentes elementos del contenedor y vuelva a dibujar la mayor cantidad de elementos de contenedores posible cada vez.

Puntos clave

1. El componente es diferente de una lista regular. La altura del componente puede ser incontrolable y parecerá sin usar dependiendo de diferentes dispositivos de teléfonos móviles.
2. Dado que los componentes tienen la misma altura, el número de varios componentes en el área de representación también es diferente, lo que da como resultado diferentes recuentos de contenedores.
3. Para las alturas que no son fáciles de calcular directamente a través de los datos, si necesita realizar una representación general y luego calcular la posición y la altura a través del DOM, consumirá un rendimiento de primera carga.

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.