tema: elegante
Recientemente, la empresa tuvo que hacer una demanda similar a la de las tarjetas deslizantes Tantan, después de dos días de viernes y fin de semana, finalmente fabricó componentes que básicamente cumplen con los requisitos, y el renderizado final es así.
Componente deslizante de mini tarjeta de programa
introducir
Este componente es un componente deslizante de tarjetas de alto rendimiento desarrollado con el código del subprograma WeChat nativo. No tiene dependencias externas y se puede usar después de importar. Su función principal y efecto son similares al deslizamiento de cartas de Tantan.
uso
Obtener:
git clone https://github.com/hspprogrammer/wx_card_swiper.git
Documentos relacionados:
-
/componentes
- /robador de tarjetas
-
/páginas
- /índice
- /componentes
- /tarjeta
- /componentes
- /índice
Entre ellos, el componente de la tarjeta en la carpeta de componentes es el nodo abstracto del componente cardSwipe , y se coloca el contenido de la tarjeta, que debe ser implementado por la persona que llama. El componente cardSwipe es la implementación específica de la función de tarjeta. El índice debajo de las páginas es la página que llama al componente, que se puede usar como referencia.
Características
Reflejos:
- Agregar dinámicamente
- La cantidad de nodos wxml de una tarjeta no se ve afectada por el tamaño de la lista de tarjetas y solo es igual a la cantidad de tarjetas mostradas. Si solo se muestran tres tarjetas a la vez, la cantidad de nodos representados por la tarjeta es solo tres
- Soporte para ajustar varias propiedades (velocidad de deslizamiento, ángulo de rotación, número de tarjetas mostradas... etc.)
- Interruptor de clic de soporte
mejoramiento
Dado que el componente admite la eliminación y el reemplazo dinámicos, esto nos permite mostrar muchas (o infinitas) tarjetas con una lista de tarjetas muy pequeña.
Escenario 1: Realice una gran cantidad de visualización de tarjetas (como 1000)
La idea de implementación original: use wx:if para representar solo la tarjeta que se muestra actualmente y las siguientes dos tarjetas, luego controle la función de devolución de llamada cardChange y luego cambie a las últimas tres tarjetas para solicitar la siguiente página de datos, y empújela directamente a la matriz renderizada Debido al control de wx:if, aunque los datos aumentan, todavía hay solo tres nodos renderizados. No se ha probado el rendimiento específico, pero al probar el teléfono móvil, se siente intuitivamente que no hay muchos problemas de rendimiento.
Nueva idea de implementación: primero, implemente la lógica de visualización cíclica, obtenga datos del fondo cada vez en forma de paginación, primero obtenga los datos de la primera página de cardsData y la segunda página de nextPageData. Cada vez que se cambia una imagen, los datos de la misma posición se obtienen de nextPageData para reemplazar los datos de cardsData.Al cambiar a los últimos datos de showNum (mostrar varias tarjetas a la vez) de la primera página, ingresará al ciclo y comience a representar cardsData nuevamente desde el principio. Data, en este momento, los datos en cardsData son en realidad los datos de la página siguiente, nextPageData, y al mismo tiempo, se solicita que los datos de la tercera página se asignen a nextPageData, y el el ciclo se repite. . . . . .
Gracias a la fuente de ideas para proporcionar ideas, y la lógica del código se implementa por sí misma.